设置为“固定”位置时，Leftnav 会缩小宽度

Question

我有一个主要内容区域和侧边栏，是结合 Bootstrap 和 Flexbox 创建的。

我想修复导航栏随页面滚动，但如果我应用 position: fixed 它不再填充它的水平空间...

为什么会这样，我该如何补救？

The codepen is here.

更新

选择的答案在 codepen 上确实有效，但在实际站点中，它仅在窗口较小时才有效，例如 iPad-portrait-size：

在正常的桌面宽度下，leftnav 不断变大...

Answer 1

您不能在也是display:flex; 布局的一部分的顶级 元素上执行position: fixed;。但是如果你有点聪明，你可以在 child 元素上使用position:fixed;。

不过，您将不得不放弃 Bootstrap 网格 - 它使用的百分比和边距与 flexbox 不兼容。 See my Codepen fork of your work.

HTML：

  <div class="two-col-wrapper">
    <div class="leftnav">
      <div class="list-group list-group-fixed">
        <a class="list-group-item active" href="">Validate Address</a>
        <a class="list-group-item" href="">Get Postal Codes</a>
        <a class="list-group-item" href="">Get City/State/Province</a>
        <a class="list-group-item" href="">Get Candidate Address</a>
        <a class="list-group-item" href="">Auto Complete</a>
      </div>
    </div>
    <div class="main-content">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p>

    </div>
  </div>

CSS：

.two-col-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: row;

  .main-content {
    background-color: #ccc;
    padding: 90px 25px;
    flex-grow: 1;
   }

  .leftnav {
    background-color: #f1f1f1;
    padding: 90px 10px;
    flex: 2 0 200px;

    .list-group-fixed {
      position: fixed;
    }
  }
}

但请记住，你很聪明，所以有一个缺点 -per the W3C rules：

弹性容器的绝对定位子容器不参与弹性布局。

Answer 2

您可以添加 flex-shrink 以减少该空间。添加到 .leftnav {}

  flex-shrink: 7;

这是您的笔的分叉版本：http://codepen.io/mimoYmima/pen/wMqOmr