html - 当设置到位置 "fixed"时，Leftnav 缩小宽度

Question

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

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

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

The codepen is here.

更新

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

在正常桌面宽度下，左侧导航不断变大...

Answer 1

您不能在 top-level 元素上执行 position: fixed; ，该元素也是 display:flex; 布局的一部分.但是，如果您有点聪明，可以在 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 :

An absolutely-positioned child of a flex container does not participate in flex layout.