如何在 Flexbox 对齐的侧边栏上模拟 'position:fixed' 行为

Question

因为已经回答了 () absolutely/fixed 定位框被从 Flexbox 对齐元素的正常流中取出。但是我怎样才能至少模拟 width: 300px; height: 100vw 元素的 position: fixed 行为？

这是一个初始布局演示 (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

如何在 Flexbox 对齐的侧边栏上模拟 'position:fixed' 行为

How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

html

css

layout

web-deployment

flexbox