为什么 Firefox 不支持 flexed div 的高度，而 Chrome 是？

Question

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

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

Chrome 以 300 像素高呈现嵌套的 div，但 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: 1shorthand规则分解如下：

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

Chrome 看到了这个，但是用 height: 300px.

覆盖了 flex-basis

Firefox 会看到这个，但不会将 flex-basis 替换为 height: 300px。

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

flex: 1 0 300px

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

7.1. The flex Shorthand

When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.

The flex item’s main size property is either the width or height property.

为什么 Firefox 不支持 flexed div 的高度，而 Chrome 是？

Why is Firefox not honoring flexed div's height, but Chrome is?

html

css

cross-browser

flexbox