/ / Jak symulować zachowanie "position: fixed" na pasku bocznym dopasowanym do Flexboksa - html5, css3, layout, web-deployment, flexbox

Jak zasymulować zachowanie "position: fixed" na pasku bocznym dopasowanym do Flexboksa - html5, css3, layout, web-deployment, flexbox

Jak już zostało udzielone (Jak mogę mieć pozycję: naprawiona; zachowanie dla elementu o rozmiarze flexbox?) absolutnie / ustalone pozycje są usuwane z normalnego przepływu elementów wyrównanych Flexbox. Ale jak mogę przynajmniej symulować position: fixed zachowanie, powiedzmy, width: 300px; height: 100vw element?

Oto wersja demonstracyjna (http://codepen.io/anon/pen/ZGmmzR) początkowego układu z paskiem bocznym po lewej i blokiem treści po prawej. chciałbym nav zachowywać się jak position: fixed element po przewinięciu przez użytkownika na stronie: wiem, jak to zrobić bez Flexboksa, w pierwszej kolejności rozważałbym czyste rozwiązanie CSS bez JavaScriptu.

Odpowiedzi:

23 dla odpowiedzi № 1

Edytować:

Rozwiązaniem, które w pewnym sensie wydaje się mniej hackowate, może być wykonanie pojemnika (.wrapper) tak wysokie, jak ekran, i tylko dodać przewijanie do głównej <section> element:

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

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

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

Oryginalna odpowiedź:

Możesz po prostu umieścić wszystko w środku <nav> w opakowaniu (tutaj: nav-wrapper), a następnie napraw to opakowanie:

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

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

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