Css 父项为flex项目时100%高度：Chrome bug？

假设我们有这样的标记：

<div id="outer">
  <div id="middle">
    <div id="inner">
    </div>
  </div>
</div>

我希望内部div可以覆盖整个300像素，因为它应该与中间的flex项一样高，而中间的flex项反过来填充其父项

这就是我在IE、Edge和Firefox上看到的行为

在Chrome上，中间的div仍然填充300像素，但内部div与没有任何高度属性时一样高

看这把小提琴：

---

这是Chrome中的一个bug，对吧？

我不认为这是Chrome中的bug

根据W3C建议：

指定高度百分比。百分比是根据生成的长方体包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），且该元素未绝对定位，则该值将计算为“自动”

---

如果将#middle设置为

height:100%

，则会得到与其他浏览器相同的结果。

这是因为您只是在

#middle

分区上使用了

flex grow:1

如果您使用推荐的

flex:1

…速记，它将非常有效

#外部{
显示器：flex；
弯曲方向：立柱；
背景色：白色；
高度：300px；
}
#中间的{
弹性：1；
/*这里*/
背景颜色：米色；
}
#内在的{
背景色：黑色；
身高：100%；
颜色：白色；
}

x

高度：100%

使用flex时会出现问题。相反，在

#outer

元素上使用

align items:stretch

。

align item

用于水平对齐，当

flex direction

为

列时-因此它与问题无关。还要注意的是，我没有在任何直接参与flex布局的元素上使用

height:100%`但包含块的高度并不取决于内容高度（在本例中为零），甚至Chrome也同意这一点。高度是显式设置的，不是使用height属性，而是使用flex-grow属性。此外，为

#middle

设置

高度：100%

并不是解决办法，因为它完全会破坏flex布局：如果我有另一个flex子元素呢？我认为如果我们有两个内部元素高度为100%的中间元素，100%意味着300而不是150px。在绝对定位不起作用的情况下，可以将绝对位置与顶部：0、右侧：0、底部：0、左侧：0一起使用，而不是高度100%。我相信Iframes可能记错了。它起作用，不是因为你使用的是

flex

属性本身，而是因为Chrome允许

flex grow

与

flex basis

一起作为孩子身高百分比的父母参考高度。任何一个属性都无法完成任务。请注意，此解决方案在Safari中不起作用。不过，这个答案很有启发性，突出了webkit浏览器中的一个重要差异。我已经在副本中更新了我的答案。谢谢

#outer {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 300px;
}

#middle {
  flex-grow: 1;
  background-color: beige;
}

#inner {
  background-color: black;
  height: 100%;
}