我怎样才能有一个职位：固定； flexbox 大小的元素的行为？

Question

我有一个名为 .side-el 的 div，我想将它放在一个位置：固定；行为，但是一旦我应用位置固定，宽度就会从右侧交替变化。正确的宽度将是 flexbox 设置的宽度。我怎样才能实现这个目标？

 .container {
  -webkit-align-content: flex-start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;

  * {
    box-sizing: border-box;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }
}

.main-el {
  box-sizing: border-box;
  padding:0 2em;
  width: 70%;
}

.side-el {
  box-sizing: border-box;
  width: 30%;
}

 <div class="container" style="background-color: blue; height: 100px;">
  <div class="main-el">
    <div  style="background-color: red; height: 1000px;">content</div>
  </div>
  <div class="side-el" >
    <div style="background-color: red; height: 100px;">content</div>
  </div>
</div>

原文由 Daniel Schmidt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你不能。

正如 CSS2.1 规范 所解释的：

绝对定位的盒子 从正常流程中取出。

弹性盒布局 规范证实：

flex 容器的绝对定位子容器 不参与 flex 布局。但是，它确实参与了 重新排序步骤（请参阅 order ），这对其绘画顺序有影响。

（强调我的）

原文由 Oriol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一种受引导程序启发的方法：

 .fixed-top {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

这给了你的 flex-box 空间来呼吸并做它的 flex-box 事情。如果您的 flex-direction 是列，您可以使用 top, left, bottom 代替。

This works because when you give an element a fixed position and a left and right of 0 or a top and bottom of 0,元素被拉伸以从左到右或从上到下填充空间。这反过来又允许 flex-box 在没有固定位置的情况下使用你期望的空间量。

原文由 Wylliam Judd 发布，翻译遵循 CC BY-SA 3.0 许可协议