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

使用对齐项目：拉伸

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

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

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

作为 align-items 的替代方法，您可以仅在要拉伸的 .flex-2-child 项目上使用 align-self。

---

我已经回答了一个类似的问题 here。

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

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

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

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

设置位置：相对；在孩子的父母身上。

设置位置：绝对；在孩子身上。

然后，您可以根据需要设置宽度/高度（在我的示例中为 100%）。

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

放溢出-y: auto;在可滚动的 div 上。

可滚动的 div 必须明确指定高度。我的样本已经有 100% 的高度，但如果没有应用，您可以指定高度：0；

有关滚动问题的详细信息，请参阅 this answer。

---

如果我理解正确，您希望 flex-2-child 填充其父级的高度和宽度，以便红色区域完全被绿色覆盖？

如果是这样，你只需要设置 flex-2 来使用 Flexbox：

.flex-2 {
    display: flex;
}

然后告诉 flex-2-child 变得灵活：

.flex-2-child {
    flex: 1;
}

请参阅http://jsfiddle.net/2ZDuE/10/

原因是 flex-2-child 不是 Flexbox 项，但它的父项是。

---

我想 Chrome 的行为更符合 CSS 规范（尽管它不太直观）。根据 Flexbox 规范，元素的“跨尺寸属性”（在本例中为 height）的 align-self 属性 changes only the used value 的默认 stretch 值。而且，据我了解 the CSS 2.1 specification，百分比高度是根据父级 height 的指定值计算的，而不是它的使用值。父级的 height 的指定值不受任何 flex 属性的影响，仍然是 auto。

设置显式 height: 100% 可以正式计算孩子的高度百分比，就像在 CSS 中将 height: 100% 设置为 html 可以计算 body 的百分比高度一样;2.1。

---

我自己找到了解决方案。假设您有以下 CSS：

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

在这种情况下，将高度设置为 100% 将不起作用，因此我将 margin-bottom 规则设置为 auto，例如：

.child {
  margin-bottom: auto;
}

并且孩子将与父母的最顶层对齐。

如果您愿意，也可以使用 align-self 规则：

.child {
  align-self: flex-start;
}

---

这也可以在我们想要拉伸的元素上使用 align-self: stretch; 来解决。

有时希望在 Flexbox 设置中仅拉伸一项。

.container { 高度：200px;宽度：500px；显示：弯曲；弹性方向：行； } .flex-1 { 宽度：100px;背景颜色：蓝色； } .flex-2 { 位置：相对；弹性：1；对齐自我：拉伸；背景颜色：红色； } .flex-2-child { 背景颜色：绿色； }