smooth scroll when using flexbox

Question

I have a page that the primary content is using 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%;
}

The problem is that all of the smooth scrolling JS/JQuery I have tried do not scroll smoothly.

The JS I am trying to use is,

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;
});

How can I use this when also using display: flex?

UPDATE: Adding fiddle, http://jsfiddle.net/sLe2699u/3/

It looks like the issue is the height: 100% on the html, body. How can I have my pages be full screen without this but still have the smooth scrolling?

Answer 1

The issue is that you're trying to scroll the html and body elements, but these are not scrollable because everything fits inside them. The element that is actually hiding something is .main-content, thus that is the element to scroll in this case.

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