当父元素是 flex 项时，设置子元素高度为100%：Chrome 是否存在 bug？

Question

假设我们有这个标记：

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

和这个css：

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

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

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

我期望内部div跨越整个300像素，因为它应该与中间的flex项一样高，而中间的flex项填充其父级。

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

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

请参见此fiddle: https://jsfiddle.net/mhjussna/

这是Chrome的一个错误，对吗？

- John

---

使用 height:100% 在 flex 中会出现错误。相反，在 #outer 元素上使用 align-items: stretch。 - Farzad Yousefzadeh

align-items 用于在 flex-direction 为 column 时进行水平对齐，因此与问题无关。另请注意，我不会在直接参与 flex 布局的任何元素上使用 height: 100%。 - John

Answer 1

这是因为您只在#middle div上使用了flex-grow:1。

如果您使用建议的flex:1缩写...它可以完美地工作。

#outer {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 300px;
}
#middle {
  flex: 1;
  /* here */
  background-color: beige;
}
#inner {
  background-color: black;
  height: 100%;
  color: white;
}

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

或者，列出所有的 flex 值

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

JSfiddle Demo

- Paulie_D

---

它能够工作，并不是因为你使用了 flex 属性本身，而是因为 Chrome 允许在 flex-grow 与 flex-basis 结合使用，作为子元素百分比高度的父级参考高度。单独使用任一属性都无法完成任务。请注意，这种解决方案在 Safari 中不起作用。尽管如此，这个答案揭示了 Webkit 浏览器中一个重要的差异。我已经在 dupe 中更新了我的答案。谢谢。 - Michael Benjamin

Answer 2

我认为这不是Chrome的错误。

来自W3C建议https://www.w3.org/TR/CSS2/visudet.html#the-height-property：

指定百分比高度。百分比是相对于生成框的包含块的高度计算的。如果未明确指定包含块的高度（即它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。

如果您为＃middle设置height：100％，则会得到与其他浏览器相同的结果https://jsfiddle.net/mhjussna/1/。

- Sergey Ratnikov

---

但是包含块的高度不取决于内容高度（在这种情况下为零），即使 Chrome 也同意这一点。高度是通过 flex-grow 属性显式设置的，而不是通过 height 属性设置的。 - John

此外，为#middle设置height: 100%并不是解决方法，因为它完全破坏了弹性布局：如果我有另一个弹性子元素会怎样？ - John

我认为如果我们有两个内部元素高度为100%的中间元素，则100％表示300而不是150px。您可以使用position:absolute和top:0，right:0，bottom:0，left:0代替height 100％。https://jsfiddle.net/6xj7zrLv/ - Sergey Ratnikov

曾经遇到过绝对定位无法正常工作的情况。我认为是因为 iframe，但可能记错了。 - John