在mdn
flex:1与...相同
flex-grow:1。但是，实际上它在浏览器中有不同的显示。
您可以通过更改CSS中的注释在jsFiddle中进行尝试。
当我使用flex: 1元素时，其类test-container名将是，height:100%但使用时不会发生flex-grow: 1。
我不明白为什么。寻求帮助。非常感谢。
.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>