A diferença entre flex: 1 e flex-grow: 1
Nomdn
flex:1
significa o mesmo que
flex-grow:1
.No entanto, na verdade, tem show diferente no navegador.
Você pode experimentá-lo nestejsFiddle alterando o comentário em css.
Quando eu usoflex: 1
o elemento que é classname étest-container
seráheight:100%
mas isso não vai acontecer quando você usaflex-grow: 1
.
Eu não entendo o porquê. Procurando alguma ajuda. Muito obrigado.
.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>