为什么 Firefox 不尊重 flexed div 的高度，而 Chrome 是？

Question

最好用一个简单的例子来说明这一点。

我有一个带有display: flex 和flex-direction: column 的容器，里面有一个带有height: 300px 和flex: 1 的div。

Chrome 将嵌套的 div 渲染为 300px 高，但 Firefox 将其渲染为单行。这只是两个浏览器之间的 flexbox 实现之间的细微差别，还是这个糟糕的代码？如果有细微差别，最好的缓解方法是什么？

.container {
  display: flex;
  flex-direction: column;
}

.container > div {
  background-color: #666;
  color: white;
  flex: 1;
  height: 300px;
}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

Answer 1

flex: 1 速记规则分解如下：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

Chrome 会看到这一点，但会用 height: 300px 覆盖 flex-basis。

Firefox 看到了这一点，但没有用height: 300px 覆盖flex-basis。

简单的跨浏览器解决方案是去掉height规则，直接使用：

flex: 1 0 300px

就规范而言，Firefox 具有正确的行为：

7.1. The flex Shorthand

当一个盒子是一个弹性项目时，flex 被咨询而不是主 size 属性来确定框的主要尺寸。

弹性项目的main size property 是 width 或 height 属性。