如何在 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