父项为 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 项目一样高，而后者又会填充其父级。

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

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

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

这是 Chrome 中的一个错误，对吧？

Answer 1

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

如果您使用推荐的简写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 演示