Flex items and min-width:0

Earlier I wrote about using flexbox to build responsive layouts. There is a behavior that can be surprising when using flexbox for layout like this. The content of a flex item in the layout can force it to not shrink appropriately. Let’s say for example you have a long URL displayed somewhere in your layout that you want to truncate. Applying overflow: hidden will not result in the item shrinking like you may expect it to. You can see an example in this codepen when resizing your browser.

This may appear as a bug, but it is actually a part of the spec for flexbox.

In the spec it says:

By default, flex items won’t shrink below their minimum content size

This means the minimum width of an item is set to the width of its content and it won’t shrink past that width. This can result in layouts appearing uneven or wrapping too early. By adding min-width: 0 to the item, it will resize at the correct ratio and still apply the overflow as desired. You can see an example here.

For more reading on this issue and others related to flexbox see this list of known bugs and the w3 spec.