如何在Flexbox对齐的侧边栏上模拟“位置：固定”行为

Question

由于已经回答（How can I have a position: fixed; behaviour for a flexbox sized element?）绝对/固定定位的框从Flexbox对齐元素的正常流中取出。但是，我怎样才能至少模拟position: fixed元素的width: 300px; height: 100vw行为？

这是初始布局的演示（http://codepen.io/anon/pen/ZGmmzR），左侧是侧边栏，右侧是内容块。我想nav跟随用户在页面上滚动后的position: fixed元素。我知道如何在没有Flexbox的情况下做到这一点。首先，我会在不使用JavaScript的情况下考虑纯CSS解决方案。谢谢！

Answer 1

修改

某种程度上感觉不那么苛刻的解决方案可能是使容器（.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