In the following nested flexboxes, .a and .c both have a flex-shrink value of 1 (both shrinking down from a base size of 700px) but all elements end up having different sizes from each other. Why?
.outer { width: 500px; /* to avoid confusion about different viewport sizes */}.a { width: 700px; /* flex-basis doesn't work */}.b { min-width: fit-content;}.c { flex-basis: 700px; flex-grow: 0;}.flex { display: flex;}div { min-width: 0; outline: 1px solid black;}<div class="outer flex"><div class="inner flex"><div class="a"> a </div><div class="b"> bbbbbbbbbbbbbbbbbbbb </div></div><div class="c"> c </div></div>There's a question about changing this code to make them have the same size, whereas here I want to understand why they have different sizes in the first place, i.e. how these sizes are computed. These questions are quite complex and quite different from each other - solving either of them appears to be neither necessary nor sufficient for solving the other.
@Downvoters:
- My research effort:
- I tried lots and lots of modifications of the code to break the phenomenon down into simpler ones and see how different elements influence each other.
- I also looked into the spec - there, whether the parent or child of a flexbox is also a flexbox is covered in layers of abstraction, and it is not directly explained nor trivial to infer how nested flexboxes (a quite common pattern) influence each other's sizes. So I believe this is a normal topic for a Stack Overflow question.
- Why this is useful to some people: Flexboxes can be nested inside each other, this is appropriate in some situations. In some cases, the resulting sizes are counterintuitive as explained above. Understanding how sizes are computed is useful for achieving certain design goals.