flex子项溢出隐藏失效的根本原因是其默认min-width: auto阻止收缩，需显式设min-width: 0覆盖该行为，并配合overflow: hidden和父容器尺寸限制才能生效。
Flex子项溢出隐藏为什么不起作用
根本原因不是overflow写错了，而是Flex子项默认有min-width: auto——它会阻止内容收缩，哪怕父容器设了overflow: hidden，子项仍强行撑开、溢出可见区域。
为什么min-width: 0能解决问题
这是Flex布局中一个关键隐式行为：当子项是块级元素（比如div）且内容含长文本或内联元素时，浏览器会按“最小内容宽度”计算其宽度下限，min-width: 0就是显式覆盖这个默认行为，让子项真正服从父容器的尺寸约束和overflow规则。
- 仅对Flex子项生效，普通块级元素设
min-width: 0无此效果 - 必须配合
overflow: hidden（或auto等）才可见裁剪效果 - 在IE11中需额外加
max-width: 0或flex-basis: 0才能稳定生效
实际应用中该加在哪个元素上
加在**直接作为Flex子项的容器元素上**，而不是文本节点或深层子元素。常见误操作是只给文字span加overflow，但真正卡住收缩的是外层div。
.flex-container {
display: flex;
}
.flex-item {
/* 关键：这里必须加 */
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
- 如果子项还用了
flex: 1，min-width: 0依然必要——flex不自动重置min-width - 用
flex: 0 1 auto时也一样，min-width: auto仍存在 - 若子项是
img，还需额外加max-width: 100%防图片撑破
其他可能干扰的样式要检查
即使加了min-width: 0，以下几类样式仍会导致溢出隐藏失效：
-
white-space: normal+ 无width限制 → 换行但不裁剪，需配overflow和text-overflow - 子项内有
display: inline-flex或display: table→ 这些显示类型自带最小宽度逻辑，优先级高于min-width: 0 - 父容器没设
width或max-width→ Flex容器自身无限宽，子项再怎么缩也没用 - CSS自定义属性未正确继承（如
--text变量在text-overflow: ellipsis中无效）→text-overflow只认纯文本
真正起效的链条是：父容器尺寸受限 → 子项min-width: 0允许压缩 → overflow: hidden触发裁剪 → text-overflow: ellipsis才有机会渲染省略号。少一环，就白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
