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

问题

This is best illustrated with a simple example.

I have a container with display: flex and flex-direction: column, with a single div inside with height: 300px and flex: 1.

Chrome renders the nested div at 300px tall, but Firefox renders it as a single line. Is this just a nuance between the implementation of flexbox between the two browsers, or is this bad code somehow? If a nuance, what's the best way to mitigate?

.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>

回答1:

The flex: 1 shorthand rule breaks down as follows:

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

Chrome sees this, but overrides flex-basis with height: 300px.

Firefox sees this, but does not override flex-basis with height: 300px.

The simple cross-browser solution is to get rid of the height rule and just use:

flex: 1 0 300px

In terms of the spec, Firefox has the correct behavior:

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.

来源：https://stackoverflow.com/questions/44484407/why-is-firefox-not-honoring-flexed-divs-height-but-chrome-is