根本原因是Flex子项默认min-width:auto阻止收缩，必须在文本容器上显式设置min-width:0（横向）或min-height:0（纵向），并配合overflow:hidden、white-space:nowrap、text-overflow:ellipsis三者缺一不可。
Flex子项overflow:hidden不生效，根本原因是min-width:auto
Flex子项默认带有min-width: auto（行内轴）或min-height: auto（块轴），它会阻止元素收缩到内容最小宽度以下——哪怕你写了overflow: hidden，浏览器也优先保内容完整，而不是裁剪。结果就是文字撑开容器、省略号不显示、截断完全失效。
这不是bug，是Flex规范明确的行为。只要父容器是display: flex，这个限制就自动生效，且优先级高于overflow。
必须显式覆盖min-width: auto才能让overflow:hidden工作
对横向布局（主轴为row），在需要截断的子元素上加min-width: 0；对纵向布局（主轴为column），则加min-height: 0。这是最轻量、兼容性最好、也最被广泛验证的解法。
-
min-width: 0不是“设成0像素”，而是解除默认的auto限制，允许浏览器按overflow规则重新计算可收缩边界 - 必须加在
overflow: hidden同一元素上，不能只加在父容器 - 若该子元素本身又是flex容器，需在其内部文本容器上再设一次
min-width: 0，否则text-overflow: ellipsis仍不触发 - 不要用
width: 0替代——它可能让元素彻底不可见，尤其配合flex: 1时行为不稳定
配合text-overflow: ellipsis使用的硬性条件
单行省略号不是光靠overflow: hidden和text-overflow: ellipsis就能生效的。缺一不可的三个条件：
- 元素需有明确的**块级格式化上下文（BFC）**：可通过
overflow: hidden、display: block等触发 - 必须设置
white-space: nowrap，禁止换行 - 该元素必须有**可计算的固定宽度**：不能依赖flex自动分配后的“剩余空间”——所以
min-width: 0本质是为宽度计算松绑
典型错误写法：.item { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } → 缺min-width: 0，必然失效。
为什么flex-basis: 0或width: 0有时也能凑效？
这两个值能间接绕过min-width: auto，但逻辑不同：
-
flex-basis: 0让元素初始尺寸为0，再靠flex-grow拉伸，此时收缩下限不再受内容约束 -
width: 0强制宽度为0，后续flex分配会基于此扩展，但某些浏览器（如旧版Safari）对width: 0+flex: 1的组合处理异常，导致渲染空白 - 相比之下，
min-width: 0语义清晰、无副作用，是W3C推荐的现代写法
真正容易被忽略的点在于：这个限制存在于整条渲染链路中。哪怕你只在一个嵌套三层的span里想截断文本，只要它的任意一个父级是flex容器，就得从最靠近文本的那个flex子项开始设min-width: 0——漏一层，就全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
