How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

Question

As it was already answered (How can I have a position: fixed; behaviour for a flexbox sized element?) absolutely/fixed positioned boxes are taken out of the normal flow of F

Answer 1

Edit:

A solution that somehow feels less hacky could be to make the container (.wrapper) as tall as the screen, and only add scrolling to the main

element:

.wrapper {
    display: flex;
    height: 100vh;
}

section {
    flex: 1 1 auto;
    overflow: auto;
}

http://codepen.io/Sphinxxxx/pen/WjwbEO

Original answer:

You could simply put everything inside

in a wrapper (here: nav-wrapper), and then fix that wrapper:

...
.nav-wrapper {
    position: fixed;
    top: 0; left: 0;
}


    

        ...
    

http://codepen.io/anon/pen/PqXYGM