Shrinking flex items

Shrinking happens completely separately in each flex line.

By default, you’ll only have one flex line anyway because flex containers don’t allow their flex items to wrap.

The point of shrinking is to prevent flex items from overflowing the flex container.

By default, flex items agree to shrink because the initial value of flex-shrink is 1.

Prevent excessive shrinking if you want a scrollable flex container

If you want your flex items to be scrollable within the flex container, that means some flex items will have to overflow the flex container. You can achieve that by preventing the flex items from shrinking altogether by setting flex-shrink: 0.

Alternatively, you could let the flex items shrink down to their minimum size. By default, a content-based minimum size will be used for the flex items. If that’s not what you want, you can set an explicit minimum size beyond which the flex items shouldn’t shrink.

Shrinking happens in rounds.

Imagine you have two flex items, and together they overflow the flex container.

The flex container asks them to shrink, and they agree. They both have the same flex base size and flex-shrink value, so they’re asked to shrink by the same amount.

But because the first flex item has a large minimum size, it only agrees to shrink down to that size.

This means the flex container is still overflowing. The first flex item is done shrinking, so the flex container will have to do another round of shrinking and ask the second flex item to shrink even more.

Shrinking isn’t simply proportional to flex-shrink.

Flexbox layout will try to preserve the ratio between the flex base sizes the flex items asked for.

For example, you could have a sidebar box that wants to be 300 pixels wide, and a content area box that wants to be 2000 pixels wide. They both have flex-shrink: 1.

If the flex container is overflowing by 400 pixels, it will have to ask the flex container to shrink by that amount.

If the amount of shrinking was simply proportionaly to flex-shrink, then both boxes would be asked to shrink by the same amount of 200 pixels.

That would make the sidebar way too tiny, and not what we intended.

So instead, Flexbox layout will take into consideration those flex base sizes of 300 and 2000 pixels, too. That way, the size of the sidebar and the content area after shrinking will stay proportional to those original intended sizes.