根本原因是min-width: auto阻止收缩；需在直接承载文本的子项上设min-width: 0，覆盖隐式最小宽度限制，并配合overflow: hidden、white-space: nowrap和width/max-width才能使text-overflow: ellipsis生效。
flex子项不收缩？根本原因是min-width: auto在挡路
Flex子项默认的min-width不是0，而是auto——它实际表现接近「内容最小宽度」，比如一段长URL或连续无空格文本，浏览器会按整个字符串长度算出一个不可压缩的下限。哪怕你写了flex: 1或flex-shrink: 1，它也死守这个宽度不放，结果就是撑爆父容器、overflow: hidden完全失效。
这不是bug，是CSS规范里明确写的「implied minimum size」行为（见Flexbox规范 §4.5）。min-width: 0不是hack，是唯一能显式覆盖这个隐式限制的合法手段。
text-overflow: ellipsis不显示？漏了min-width: 0就白配
text-overflow: ellipsis要生效，必须同时满足四个条件，缺一不可：
- 元素是块级或
inline-block（span得先加display: block） - 有明确的
width或max-width（不能是auto） white-space: nowrapoverflow: hidden
但第2条在Flex里很狡猾：即使父容器设了width: 100%，子项若没min-width: 0，它仍会拒绝被压到比内容窄，导致width计算结果还是auto。所以min-width: 0是触发整个链条的前提，不是可选项。
加在哪一层？错一层就全失效
必须加在**直接承载文本的元素上**，不是Flex容器，也不是外层包裹div。
比如结构是：
.container { display: flex; }<br>.item { flex: 1; }<br>.item > span { /* 这里才是文字所在 */ }那么min-width: 0必须落在span上，否则span仍按自身内容宽度锁定，.item再怎么flex也没用。常见翻车点：
- 用了
flex: 0 1 auto缩写——它隐含min-width: auto，必须额外覆盖 - 子项是
img——除了min-width: 0，还得加max-width: 100%防原始尺寸撑开 - 子项内有
display: inline-flex或display: table——这些显示类型自带更强的最小宽度逻辑，min-width: 0会被无视
为什么有时候加了min-width: 0还不行？检查这三处
即使声明了min-width: 0，也可能因以下原因失效：
- 父容器没设
width或max-width——Flex容器自身无限宽，子项再缩也没意义 -
white-space: normal且没配word-break或overflow-wrap——文本换行绕过了截断逻辑 - 用了
display: inline-flex嵌套——内层Flex项的min-width: auto优先级更高，得在外层也加min-width: 0
最稳的验证方式：打开Chrome DevTools，选中目标元素，在Computed面板里确认min-width的最终值是不是0px，别信Styles里写的那行，信渲染引擎算出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
