The difference between flex:1 and flex-grow:1 - css

Question

In mdn
flex:1
means the same as
flex-grow:1.
However, in fact it has different show in browser.
You can try it in this jsFiddle by changing the comment in css.
When I use flex: 1 the element who's classname is test-container will be height:100% but it won't happen when you use flex-grow: 1.
I don't understand why. Looking for some help. Thanks very much.
.flex-1 {
display: flex;
flex-direction: column;
height: 500px;
background: red;
}
.child-1 {
height: 50px;
background: blue;
}
.child-2 {
flex-grow: 1;
/* flex:1; */
background: green;
}
.test-container {
display: flex;
flex-direction: row;
background: white;
height: 100%;
}
<div class="flex-1">
<div class="child-1"></div>
<div class="child-2">
<div class="test-container"></div>
</div>
</div>

Answer 1

flex
The flex property is a shorthand for setting:
flex-grow
flex-shrink
flex-basis
The flex: 1 rule is supposed to compute to this:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
These values are defined in the spec. See section 7.1.1. Basic Values of flex
I say "supposed to compute" because, in IE11 and possibly other browsers, a unit of measure, such as px or %, is appended to the 0 value in flex-basis. This can make a difference (example).
flex-grow
The flex-grow property (which distributes free space in the container among flex items), when declared by itself, leaves flex-shrink and 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)
The difference between flex: 1 and flex-grow: 1
Ultimately, the difference between flex: 1 and flex-grow: 1 is that the former sets flex-basis: 0, and the latter keeps the default flex-basis: auto.
For a complete explanation of the difference between flex-basis: 0 and flex-basis: auto see this post:
Make flex-grow expand items based on their original size
Your code example
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.
With flex-basis: 0, the height of the element is 0, and flex-grow has no free space to distribute.
The height: 100% on the child of the flex item is simply ignored because it isn't being applied properly, as explained in these posts:
Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent
In reading the posts above you'll also understand why your code renders differently in Firefox, Safari, Edge and IE.

Answer 2

l get the reason why that happen. In fact
flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%
the key is the flex-basis:0%. If you use flex-grow:1,the flex-basis will be auto. In this sutation, you can't let the height:100% work .
However I don't sure when the
flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%
will happen. In the doc
flex:1 !== flex-grow:1;flex-shrink:1;flex-basis:0%