Minimum Content Size In CSS FlexBox

CSS FlexBox's minimum content size: If the text element or image of a flex item is larger than the item itself, the browser will not shrink them. This is the default behavior of flexbox.

I am a card

cardcardcardcardcard

You can see that the content overflows, and even if we use overflow-wrap: break-word to force a line break, it will not work.

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

To change the default behavior of FlexBox, we need to set the min-width of the FlexBox child to 0.

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

cardcardcardcardcardcard

---

Similarly, in the column direction, you can also use min-height to change the default behavior of FlexBox.