父项为 flex 项时 100% 高度：Chrome 错误？ [复制]

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 与没有任何高度属性时一样高。

看到这个小提琴：https://jsfiddle.net/mhjussna/

这是 Chrome 中的错误，对吧？

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>

或者，声明所有的弹性值

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

JSfiddle Demo

Answer 2

我认为这不是 Chrome 中的错误。

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

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

如果您为#middle 设置height: 100%，您将获得与在其他浏览器中相同的结果https://jsfiddle.net/mhjussna/1/。