ARTICLE AD BOX
I have a flexbox where all items can shrink and one item can grow:
div {
border: 1px solid black;
margin: 1px;
}
<div style="display: flex; width: 110px;">
<div style="width: 2em;">a</div>
<div style="width: 3em;">b</div>
<div style="width: 4em; flex-grow: 1;">c</div>
</div>
I want to wrap the first two inner elements into a dedicated div. (This can have various reasons for some of which there are hacky workarounds. Instead of that, I'd like to understand the capabilities of flexbox.)
The problem is that the widths change completely:
div {
border: 1px solid black;
margin: 1px;
}
<div style="display: flex; width: 110px;">
<div style="display: flex; width: 5em; flex-basis: 5em;">
<div style="width: 2em;">a</div>
<div style="width: 3em;">b</div>
</div>
<div style="width: 4em; flex-grow: 1;">c</div>
</div>
Even setting the new div's width and/or flex-basis to the sum of the children's widths doesn't help. (Such a solution would be prone to bugs anyway when children get added or their width changes or is unknown.)
How can I get the responsive item sizes of my first example but wrap two items in a div?
