scorrimento fluido quando si utilizza flexbox: javascript, jquery, html, flexbox, scorrimento uniforme

Ho una pagina che sta usando il contenuto principale display: flex,

.outer-wrap .inner-wrap {
display: flex;
display: -webkit-flex;
display: -ms-flex;
display: -ms-flexbox;
margin-left: -280px;
transition: all 0.5s ease;
height: 100%;
}

Il problema è che tutto lo scorrevole JS / JQuery che ho provato non scorre perfettamente.

Il JS che sto cercando di usare è,

var $root = $("html, body");

$(".sideNav-link").click(function() {
var href = $.attr(this, "href");
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});

Come posso usare questo anche quando lo uso display: flex?

AGGIORNARE: Aggiungendo il violino, http://jsfiddle.net/sLe2699u/3/

Sembra che il problema sia il height: 100% sull'html, corpo. Come posso avere le mie pagine a schermo intero senza questo, ma ho ancora lo scorrimento fluido?

risposte:

Il problema è che stai provando a scorrere il html e body elementi, ma questi non sono scorrevoli perché tutto si adatta a loro. L'elemento che sta effettivamente nascondendo qualcosa è .main-content, quindi questo è l'elemento da scorrere in questo caso.

$("a").click(function(){
$(".main-content").animate({
scrollTop: $( $(this).attr("href") ).offset().top
}, 500);
return false;
});