Question

我有一个带有align-items: stretch声明的直接子项的flexbox。

在这个flexbox的直接子项中，我希望有一个div容器，它也使用其父级的全高（通过设置height: 100%）。

但是，div容器不会伸展到其父级的100％高度，除非我还在flexbox的直接子级上设置了height: 100%。

有点像虫子吗？我必须使用align-items: stretch AND height: 100%设置flexbox的直接子项才能达到我想要的效果吗？这对我来说似乎是多余的。

以下是一个例子：

html,
body {
  margin: 0;
  height: 100%;
}

.flexbox {
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: green;
}

.flexbox-child {
  // height: 100%; uncommenting this will get it to work
  align-items: stretch;
  background-color: blue;
}

.flexbox-grand-child {
  height: 100%;
  background-color: red;
}

<div class="flexbox">
  <div class="flexbox-child">
    <div class="flexbox-grand-child">
      I want to be stretched till the bottom
    </div>
  </div>
</div>

http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview

谢谢！

Answer 1

创建Flex容器时，只有子元素成为弹性项目。儿童以外的后代不会成为弹性物品，柔韧性不适用于他们。

只需将display: flex应用于flex项目，该项目也会将其转换为Flex容器。然后，align-items: stretch等默认的弹性属性将应用于子级（现在是弹性项目）。

您写道：

我想有一个div容器也使用其父容器高度...

您不需要使用height: 100%或添加align-items: stretch（这是默认规则）。只需将display: flex添加到.flexbox-child，.flexbox-grand-child即可展开完整的可用高度。

修改演示：http://plnkr.co/edit/n0Wt3x3CUr1ZfBD2RrGo?p=preview

重新：height: 100% possible bug

关于在子元素上指定height: 100%的需要，我在这里看不到任何错误。一切似乎都符合spec。以下是完整的解释：Working with the CSS height property and percentage values

Answer 2

这是一个复杂的案例。

您的.flexbox-child只是一个弹性项目，但不是一个弹性容器。因此，忽略仅适用于Flex容器的align-items: stretch。

然后，.flexbox-grand-child的百分比为height，其行为如下：

百分比是根据高度来计算的生成的框包含块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的值计算'自动'。

包含块是弹性项目（.flexbox-child），它没有明确的高度，其高度似乎取决于内容。

但是，这种依赖性仅归因于新的min-height: auto。但在考虑min-height之前，弹性项目的高度将是（由于初始align-self: stretch）容器的高度，这是明确指定的，忽略了内容。

然后，Firefox认为.flexbox-child的高度不依赖于其内容，因此其子项中的height百分比应该有效。然后你的代码就可以了。

然而，Chrome并不这么认为。

我不确定哪一个做得对。 height仅在旧的CSS2.1和CSS基本框模型中定义，这是一个不一致的草案。

为安全起见，请更明确地设置.flexbox-child的高度。或者将它变成一个弹性容器。

在flexbox中使用'height：100％'和'align-items：stretch'

2 个答案: