如何在Flexbox对齐的侧边栏中模拟“position:fixed”行为

Question

如之前所回答的(如何使flex框大小的元素表现出position：fixed的行为？)，绝对/固定定位的盒子被抽离了Flexbox对齐元素的正常流程。但是我如何至少模拟一个width: 300px; height: 100vw元素的position: fixed行为呢？

这里有一个演示（http://codepen.io/anon/pen/ZGmmzR），展示了侧边栏在左侧，内容块在右侧的初始布局。我希望nav能够像position: fixed元素一样，在用户滚动页面时跟随移动。我知道如何在不使用Flexbox的情况下实现这一点。首先，我会考虑纯CSS解决方案，而不使用JavaScript。谢谢！

- user3576508

Answer 1

编辑：

一个感觉不太像hacky的解决方案是将包含容器(.wrapper)设为屏幕高度，并只对主要的<section>元素添加滚动条：

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

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

Translated answer:

您可以简单地将所有内容放在 <nav> 中的包装器内（此处为 nav-wrapper），然后固定该包装器：

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

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

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

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

- Sphinxxx

---

这是非常正确和显而易见的解决方案。下次在工作之前，我真的应该好好休息一下。谢谢！ - user3576508

@VickyChijwani - 那个布局会是什么样子？你有演示吗？ - Sphinxxx

@SudarP - 我没有Safari浏览器，但这只是基本的flexbox行为，所以我认为它应该支持。 - Sphinxxx

Flex解决方案可行，但是使用overflow属性后，刷新时内容滚动位置会出现问题（位置不会被记住）。 - Burrich

@Burrich 我使用了类似于这个答案中编辑后的解决方案的 flex 布局。css-tricks.com 引用了一个简单的 JavaScript 和本地存储解决方案，来自 Twitter 的一篇帖子（https://twitter.com/hakimel/status/1262337065670316033），用于记住侧边栏 div（或任何 div）的滚动位置。https://css-tricks.com/memorize-scroll-position-across-page-loads/。请参阅读者评论以获取推文代码的推荐修改。 - Dave B