Minimum Content Size In CSS FlexBox

CSS FlexBox 的 最小内容大小： 如果 flex 项的文本元素或图像大于项本身，则浏览器不会收缩它们。这是 flexbox 的默认行为。

I am a card

cardcardcardcardcardcard

可以看到内容发生了溢出，即使我们使用 overflow-wrap: break-word 来强制换行，也不会起作用。

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

要改变 FlexBox 的默认行为，我们需要将 FlexBox 的子项 的 min-width 设置为 0。

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

cardcardcardcardcardcard

---

同样的， 在 列方向上，也可以使用 min-height 来改变 FlexBox 的默认行为。

贡献者

• liuyanliang

版权所有

版权归属：liuyanliang

本文链接：/defensive-css/minimum-content-size-in-flex-box/

许可证：署名-非商业性-禁止演绎 4.0 国际 (CC-BY-NC-ND-4.0)