Galera, tudo bom com vocês?
Estou estudando o CSS flexbox e na parte sobre a flexibilidade que cada item pode ter fiquei com a seguinte dúvida:
No exemplo em anexo, os itens ultrapassam 150px do seu contêiner, usando a propriedade flex e setando o flex-shrink para 1 em ambos os itens flex, como é feito a redução proporcional quando se tem flex-basis diferentes? Existe uma forma deu saber o quanto ele vai reduzir sem eu precisar olhar na ferramenta de desenvolvedor ou seja o cálculo?
A primeira div fica com 307.6875px e a segunda com 192.3125px, até então eu achei que simplesmente seria descontado 75px de cada div (o espaço negativo é 150 e a proporção é de 1/2), mas devido aos tamanhos diferentes usado no flex-basis eu fiquei sem entender.
Justificando meu raciocínio:
Quando os width dos itens são iguais, verifiquei que simplesmente os itens são reduzidos proporcionalmente com relação ao tanto que passou (espaço negativo), então se passou 150px e ambos os itens tivessem o mesmo flex-basis, cada um seria reduzido em 75px de seu tamanho. Foi o que eu entendi pelo menos, me desculpe caso eu esteja equivocado.
Agradeço a ajuda.
var exibeLargura1 = document.querySelector(".largura1");
var exibeLargura2 = document.querySelector(".largura2");
var larguraBx1 = document.querySelector(".box1").getBoundingClientRect();
var larguraBx2 = document.querySelector(".box2").getBoundingClientRect();
exibeLargura1.textContent = larguraBx1.width;
exibeLargura2.textContent = larguraBx2.width;
.container {
width: 500px;
height: 80px;
background: sandybrown;
color: white;
display: flex;
}
.box1 {
background-color: red;
width: 400px;
flex: 0 1 auto;
}
.box2 {
background-color: green;
width: 250px;
flex: 0 1 auto;
}
<body>
<div class="container">
<div class="box1"><span>1</span></div>
<div class="box2"><span>2</span></div>
</div>
<p>O tamanho do box 1 é: <span class="largura1"></span>, do box 2 é: <span class="largura2"></span></p>
</body>