/* flex:1; */
flex property is a shorthand for setting:
flex: 1 rule is supposed to compute to this:
These values are defined in the spec. See section 7.1.1. Basic Values of
I say "supposed to compute" because, in IE11 and possibly other browsers, a unit of measure, such as
%, is appended to the
0 value in
flex-basis. This can make a difference (example).
The flex-grow property (which distributes free space in the container among flex items), when declared by itself, leaves
flex-basis at their initial values.
So when you set
flex-grow: 1, the browser renders this:
flex-grow: 1(overrides the default value, which is 0)
flex-shrink: 1(this is the default value)
flex-basis: auto(this is the default value)
Ultimately, the difference between
flex: 1 and
flex-grow: 1 is that the former sets
flex-basis: 0, and the latter keeps the default
For a complete explanation of the difference between
flex-basis: 0 and
flex-basis: auto see this post:
The reason you're seeing a difference in your code is that
flex-basis controls height in a column-direction container.
In Chrome, with
flex-basis: auto, the height of the element is 450px (500px parent - 50px header). In other words,
flex-grow is free to distribute the free space.
flex-basis: 0, the height of the element is 0, and
flex-grow has no free space to distribute.
height: 100% on the child of the flex item is simply ignored because it isn't being applied properly, as explained in these posts:
heightproperty and percentage values
In reading the posts above you'll also understand why your code renders differently in Firefox, Safari, Edge and IE.