Html 使用'；身高：100%'；和'；对齐项目：拉伸和#x27；在flexbox中

我有一个flexbox，其中有一个直接子项，该子项声明为

align items:stretch

在这个flexbox的直接子级中，我希望有一个div容器，它也使用其父级的完整高度（通过设置

height:100%

）

但是，div容器不会拉伸到其父容器的100%高度，除非我也在flexbox的直接子容器上设置了

height:100%

这是一种虫子吗？我必须使用

align items:stretch

和

height:100%

设置flexbox的直接子项才能达到我想要的效果吗？我觉得这是多余的

以下是一个例子：

html，
身体{
保证金：0；
身高：100%；
}
.flexbox{
显示器：flex；
弯曲方向：行；
身高：100%；
背景颜色：绿色；
}
.flexbox儿童{
//高度：100%；取消注释将使其正常工作
对齐项目：拉伸；
背景颜色：蓝色；
}
.flexbox孙子{
身高：100%；
背景色：红色；
}

我想被拉伸到底部

这是一个复杂的案例

您的

.flexbox子项

只是一个flex项，而不是flex容器。因此，

align items:stretch

（仅适用于flex容器）被忽略

然后，

.flexbox grand child

有一个百分比，其行为如下：

该百分比是根据建筑物的高度计算的 生成的框的包含块。如果容器的高度 块未明确指定（即，它取决于内容 高度），并且该元素不是绝对定位的，该值 计算为“自动”

包含的块是flex项（

.flexbox child

），它没有明确的高度，其高度似乎取决于内容

但是，这种依赖性仅是由于新的

min height:auto

。但在考虑

min height

之前，弹性项的高度将是（由于初始的

align self:stretch

）容器的高度，该高度是明确指定的，忽略内容

然后，Firefox认为

.flexbox child

的高度不取决于其内容，因此

高度

在其子项中的百分比应该起作用。然后你的代码就可以工作了

然而，Chrome并不这么认为

我不确定哪一个做得对。

height

仅在旧的CSS2.1和CSS基本框模型中定义，这是一个不一致的草案，这并没有帮助

---

为了安全起见，最好明确设置

.flexbox child

的高度。或者将其设置为flex容器。

创建flex容器时，只有子元素成为flex项。子代以外的子代不会成为flex项，flex属性也不会应用于它们

只需将

display:flex

应用到flex项，它也会将其转换为flex容器。然后默认的flex属性，如

align items:stretch

将应用于子项（现在是flex items）

你写道：

我想要一个div容器，它也使用其父容器的full 高度

您不需要使用

高度：100%

或添加

对齐项目：拉伸（这是默认规则）。只需将
display:flex
添加到
.flexbox-child
，并且
。flexbox-grand-child
将扩展全部可用高度

修改的演示：


re:
高度：100%可能出现错误

关于需要在子元素上指定
height:100%
，我在这里没有看到任何错误。一切似乎都符合规则。这里有一个完整的解释：
是的，我想说的是，你倒过来了，错误在FF中。仅当“明确指定”高度时，百分比高度才起作用。Imho作为拉伸弹性物品不符合条件@是的，但Firefox的行为可能仍然有意义。请参阅我的更新。谢谢您的详细回答。顺便说一句，“新的最小高度：自动”是什么意思？@royv以前，
min height
和
min width
的初始值是
0
。但是，flexbox规范将其更改为
auto
<对于大多数元素，代码>自动

的行为类似于

0

。但是，对于具有

溢出：可见
的flex项，它会强制它们增长以覆盖其内容。看，我想知道规格是否改变了。FF（49）和Chrome（53）似乎都没有问题，使flex项目的子项达到100%的高度。但Safari（10）无法处理，需要在弹性物品上设置特定高度，以便儿童正确伸展。