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.

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

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.

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

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.