Flex items and "min-width: 0"

I keep forgetting about this one, so it's time to write a blog post about it.

Problem

What to do when we have a really long text, for example a URL, within a flex layout, and we want to truncate it?

Research

As the flexbox spec says:

To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

It translates to:

• The min-width: auto and min-height: auto defaults apply only when overflow is visible.
• If the overflow value is not visible, the value of the min-size property is 0.

Conclusion

To allow for content to truncate we can either use overflow: hidden or min-width: 0 / min-height: 0. This way we either get rid of the default size or overwrite it.

What about Nested Flex Containers?

In case you have flex items at different levels in your HTML structure, overriding the default min-width: auto / min-height: auto on items at higher levels might become necessary. This means that a higher level flex item that has min-width: auto can stop the items nested below it with min-width: 0 from shrinking.

Sources:

• Why don't flex items shrink past content size? (StackOverflow)
• min-width rendering differently in flex-direction: row and flex-direction: column (StackOverflow)