Minimum Content Size In CSS Flexbox

If a flex item has a text element or an image that is bigger than the item itself, the browser won’t shrink them. That is the default behavior for flexbox.

Consider the following example.

.card {
    display: flex;
}

Even if we use overflow-wrap: break-word, it won’t work.

.card__title {
    overflow-wrap: break-word;
}

To change that default behavior, we need to set the min-width of the flex item to 0. That’s because the min-width default value is auto, the overflow happens.

.card__title {
    overflow-wrap: break-word;
    min-width: 0;
}

The same thing applies to a column flex wrapper, but we will use min-height: 0 instead.

Examples and use cases #

Long card title #

In this example, the card title is too long. As a result, flexbox will apply the default behaviour which is to make the element size as equal to its content length.

That's because the default min-width value is auto.

To fix that, we need to apply min-width: 0 on the flex item. Try to check the "Toggle defensive" checkbox to see it yourself.