Below is an example of HTML with default flex properties being used:
<div class="container">
<div class="box"> BOX 1</div>
<div class="box"> BOX 2</div>
<div class="box box2"> BOX 3 .</div>
</div>
The styles applied are as follows:
.container {
border: 1px solid #59c;
width: 60vw;
background: #ccc;
height: 200px;
margin: 0 auto;
display: flex;
padding: 30px;
}
.box {
font-size: 18px;
font-weight: 800;
background: #e5f;
border: 1px solid #99c;
padding: 20px;
}
Upon inspecting in Chrome browser, the computed widths for Box 1 and Box 2 are 94.52px, while Box 3 has a width of 103.52px. View the fiddle here. When the following style is added:
.box2 {
flex: 2 1;
}
and flex: 1 1; to the .box {} rules, the computed widths change to
226.5px for Box 1 and 2, and 411px for Box 3.
The parent container's width is 864px. Substituting the values into the formula 864 - 103.53 + (94.52 * 2) results in 571.43px. This space is then distributed, but it is unclear how each box reaches its final width.
If anyone can provide insight on this calculation, please share!