如何在Flexbox对齐的侧边栏上模拟"位置:固定"行为

Question

因为它已经回答了(我怎么能有一个位置:固定;一个弹性盒尺寸元素的行为？)绝对/固定定位的盒子从正常的Flexbox对齐元素流中取出.但是,我怎么能至少模拟元素的position: fixed行为width: 300px; height: 100vw呢？

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

Answer 1

编辑:

不知何故感觉不那么hacky的解决方案可能是使container(.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