Why do nested flexbox items shrink differently?

The Firefox DevTools "Layout" tab explains the computations. Here's an example screenshot for one of the elements:

Let's read the first (blue) line of the "Layout" tab for each element, starting with the inner elements:

.a has width: 700px; and thus a "Base Width" of 700px .b has some text, in my default font the "Content Size" is 160px .inner contains the two things above, summing up to a "Content Size" of 860px .c has flex-basis: 700px; and thus a "Base Size" [sic!] of 700px

Now let's traverse back from the outside to the inside:

.outer:

.outer contains .inner and .c, whose base sizes have a ratio of 860:700, see above. Both have a flex-shrink value of 1 (see the second (pink) line of the "Layout" tab). So the numbers of pixels by which they shrink should have a ratio of (1·860):(1·700). And their shrunk sizes should sum up to 500px because .outer has width: 500px; (near the bottom of the "Layout" tab, under "Box Model", it says 500).

To achieve these two goals, .inner shrinks by 584.37px (see the second (pink) line of the "Layout" tab) to a "Final Size" (see the third (black) line) of 275.63px, and .c shrinks by 475.63px. I get a slightly different last digit with 860-500/(860+700)*860 no matter how I round; maybe the browser computes and rounds binary numbers for efficiency, and on rare occasions such as this DevTools tab or JS access to certain DOM properties, it converts to the decimal system and rounds there again.

.inner's "Final Size" is 275.63px (see above). It contains .a and .b.

.b has flex-shrink: 1 (second (pink) line) but this is overridden by min-width: fit-content;, so it has the same "Minimum Size" (third (purple) line of the "Layout" tab) as its "Content Size" of 160px. .a has flex-shrink: 1 (second (pink) line). For .b with 160px and .a to sum up to the 275.63px of their parent, .a shrinks to 115.63px.

Verdict

The final size ratio gets computed from numbers such as 700px and 160px even though some of them get shrunk and don't appear anywhere in the final layout whereas others remain unchanged. No use cases come to mind where such a size ratio is meaningful design-wise.

This is probably just a fast hack (for breaking a circular dependency between the absolute size and the size ratio?) rather than the best solution to a system of equations or optimization problem that formalizes the designer's typical and explicitly implemented intentions.

We are talking about nested flexbox items. The behavior of flex items regarding shrinking is governed by the flex-shrink property. When nested, the shrinking behavior can become more complex because each flex container and item has its own flex context.

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items in the same container when there isn't enough space. The default value is 1, meaning items will shrink equally to fit the container.

However, when we have nested flex items, the inner flex item is a flex item in the outer container and also a flex container for its own children. The shrinking behavior at each level can be different and might interact in ways that are not immediately obvious.

Key points to consider:

flex-shrink factor: The flex-shrink value of an item is multiplied by the item's base size (or its flex-basis) to determine how much it will shrink relative to other items. The formula for the negative free space distribution is:
total_shrink_factor = sum( (flex-shrink * base_size) for each item )

shrink_ratio = (flex-shrink * base_size) / total_shrink_factor

Nested flex containers: If a flex item is itself a flex container, then the inner flex items will shrink according to the rules of the inner flex container. However, the outer flex container sees the inner flex container as a single item that will shrink according to the outer container's rules.

Content size and minimum content size: Flex items have a default min-width: auto (or min-height: auto in column direction). This means that by default, a flex item cannot shrink below its minimum content size. However, this can be overridden by setting min-width: 0 or min-height: 0 (or min-size: 0 in the relevant direction) on the flex item.

In nested flex containers, if the inner flex container has a lot of content, it might not shrink below its minimum content size unless we explicitly set min-width: 0 (or the appropriate min-size) on the outer flex item that is the inner flex container.

Different flex-shrink values: If nested flex items have different flex-shrink values, then they will shrink at different rates. This can be set explicitly or inherited from defaults.