我怎样才能让 Flexbox 孩子 100% 的高度是他们的父母？

Question

我正在尝试填充 Flexbox 内的弹性项目的垂直空间。

 .container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

 <div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

这是 JSFiddle

flex-2-child 不填充所需的高度，除非在以下两种情况下：

1. flex-2 高度为 100%（这很奇怪，因为弹性项目默认为 100% + 它在 Chrome 中是错误的）
2. flex-2-child 有一个绝对位置，这也很不方便

目前这在 Chrome 或 Firefox 中不起作用。

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

Answer 1

使用 align-items: stretch

与 David Storey 的回答类似，我的解决方法是：

 .flex-2 {
    display: flex;
    align-items: stretch;
}

请注意，应从子组件中删除 height: 100% （请参阅注释）。

或者 align-items ，您可以使用 align-self 就在 .flex-2-child 您想要拉伸的项目上。

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

Answer 2

我在 这里 回答过类似的问题。

我知道您已经说过 position: absolute; 不方便，但它有效。有关解决调整大小问题的更多信息，请参见下文。

另请参阅此 jsFiddle 的演示，尽管我只添加了在 Chrome 中打开的 WebKit 前缀。

您基本上有两个问题，我将分别处理。

1. 让弹性项目的孩子填充高度 100%

• 在孩子的父母身上设置 position: relative; 。
• 在孩子身上设置 position: absolute; 。
• 然后您可以根据需要设置宽度/高度（在我的示例中为 100%）。

1. 修复 Chrome 中的调整大小滚动“怪癖”

• 将 overflow-y: auto; 放在可滚动的 div 上。
• 可滚动的 div 必须明确指定高度。我的样本已经有 100% 的高度，但如果没有应用，您可以指定 height: 0;

有关滚动问题的更多信息，请参阅 此答案。

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