Как имитировать поведение "позиция: исправлено" на Flexbox -определенной боковой панели

Как уже было сказано (как я могу установить позицию: исправлено, поведение для элемента размера Flexbox?) Абсолютно/фиксированные позиционные поля извлекаются из нормального потока элементов, выровненных по Flexbox. Но как я могу хотя бы имитировать position: fixed поведение, скажем, width: 300px; height: 100vw width: 300px; height: 100vw элемент?

Ниже приведена демонстрация (http://codepen.io/anon/pen/ZGmmzR) начальной компоновки с боковой панелью слева и блоком контента справа. Я бы хотел, чтобы nav действовал как position: fixed элемент, следующий за пользователем, прокручивает страницу. Я знаю, как это сделать без Flexbox. Во-первых, я бы рассмотрел чисто CSS-решение без использования JavaScript. Спасибо!

Ответы

Ответ 1

Edit:

Решение, которое каким-то образом кажется менее взломанным, может заключаться в том, чтобы контейнер (.wrapper) был высок, как экран, и добавлял только прокрутку к основному элементу <section>:

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

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

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

Оригинальный ответ:

Вы можете просто поместить все внутри <nav> в оболочку (здесь: nav-wrapper), а затем исправить эту оболочку:

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

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

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