Li que flex-basis deveria substituir width. Mas, neste exemplo, ambos os contêineres têm flex-basis:0
, mas o segundo também tem width:50px
"defined" e isso claramente tem o efeito de tornar o tamanho igual.
Então estou intrigado com duas coisas relacionadas:
- por que flex-basis:0 não substituiu a largura (eu não esperaria nenhum efeito ao adicionar
width
ao css) - por que flex-basis:0 não funcionou para definir o tamanho hipotético como 0, resultando na largura igual sem adicionar largura
Pelo que entendi da especificação :
Determine o tamanho da base flexível e o tamanho principal hipotético de cada item:
- Se o item tiver uma base flexível usada definida, esse será o tamanho da base flexível.
- O tamanho principal hipotético é o tamanho da base flexível do item fixado de acordo com seus tamanhos principais mínimo e máximo usados (e limitando o tamanho da caixa de conteúdo a zero).
Portanto, o tamanho da base flexível está definido e deve ser resolvido como 0. O tamanho principal hipotético também deve ser resolvido como 0, pois há restrições de largura mínima/máxima.
.container1, .container2 {
width: 210px;
height: 200px;
padding: 10px;
border: solid;
display: inline-flex;
box-sizing: border-box;
div {
margin: 1px;
flex: 1 1 0;
}
& div:nth-child(1) {
background: lightpink;
}
& div:nth-child(2) {
background: lightblue;
}
}
.container2 div {
width: 50px;
}
<div class="container1">
<div>short</div>
<div>looooooooooooooong</div>
</div>
<div class="container2">
<div>short</div>
<div>looooooooooooooong</div>
</div>