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

Question

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

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

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

The codepen is here.

更新

所选答案在 codepen 上确实有效，但在真实站点中它仅在 window 较小时才有效，例如 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.

Answer 2

您可以添加 flex-shrink 来减少 space。添加到 .leftnav {}

  flex-shrink: 7;

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

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

Leftnav shrinks width when set to position "fixed"

html

css

css-position

flexbox

twitter-bootstrap