Come simulare il comportamento di "posizione: fissa" sulla barra laterale allineata a Flexbox

Question

Come già risposto (How can I have a position: fixed; behaviour for a flexbox sized element?), le caselle posizionate in modo assoluto/fisso vengono eliminate dal normale flusso di elementi allineati a Flexbox. Ma come posso almeno simulare il comportamento di position: fixed, ad esempio, dell'elemento width: 300px; height: 100vw?

Ecco una demo (http://codepen.io/anon/pen/ZGmmzR) di layout iniziale con barra laterale a sinistra e blocco contenuto a destra. Mi piacerebbe che nav si comporti come l'elemento position: fixed seguendo la pagina di scorrimento dell'utente. So come farlo senza Flexbox. In primo luogo considererei la soluzione CSS pura senza usare JavaScript. Grazie!

Answer 1

Edit:

Una soluzione che si sente in qualche modo meno hacky potrebbe essere quello di rendere il contenitore (.wrapper) alto come lo schermo, e solo aggiungere scorrendo fino al principale <section> elemento:

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

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

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

risposta originale:

Si potrebbe semplicemente mettere tutto dentro <nav> in un involucro (qui: nav-wrapper), e poi correzione involucro:

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

<nav role="navigation"> 
    <div class="nav-wrapper"> 
     ... 
    </div> 
</nav> 

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