根本原因是min-width: auto导致flex子项拒绝压缩，解决需在直接含文本的子项上设min-width: 0，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束（如flex: 1 1 0）四者同作用于同一元素。
min-width: auto 是根本原因，它让 Flex 子项“宁可撑破容器，也不压缩内容”。
Flex 子项默认自带 min-width: auto，浏览器会按最长不可折行单元（比如一串无空格 URL：@#@#@#@#@#@#@#@#@#@0）锁定最小宽度。哪怕父容器只有 200px，这个子项也拒绝缩到比 URL 更窄——结果就是文字顶宽、图标被挤跑、布局错乱。
DevTools 里看 computed 样式，只要 min-width 还是 auto，基本就锁定了问题根源。
min-width: 0 必须加在哪个元素上？
- 必须加在直接含文本的 Flex 子项上，比如
.item > span或.title - 加在父容器（如
.list-item）上完全无效 - 嵌套 Flex 场景下，内层需截断的文本元素（如
.info > p）也得单独加，不继承
min-width: 0 不是设“最小宽度为 0”，而是显式覆盖 min-width: auto，告诉 Flex：「允许我缩到比内容还小」。
别写 min-width: 0px 或 min-width: 0% —— 只有无单位的 min-width: 0 是标准写法，兼容性最稳。
为什么只加 min-width: 0 还是溢出？
因为它是“钥匙”，不是“完整方案”。真正触发省略号需要四件套同时作用于同一元素：
-
white-space: nowrap：必须写在这里，否则文字提前折行，连“单行溢出”都不成立 -
overflow: hidden：裁剪动作本身，但没min-width: 0时常形同虚设 -
text-overflow: ellipsis：只对块级元素生效，span类行内元素要先加display: block - 明确宽度约束：来自父容器的
max-width，或自身flex: 1 1 0（注意是数字0，不是0%）
漏掉任意一个，text-overflow: ellipsis 就不会画点。
flex: 1 和 flex: 1 1 0 差在哪？
-
flex: 1等价于flex: 1 1 0%，其中0%是百分比，需依赖父容器当前宽度计算 —— 而 Flex 布局计算顺序中，父宽可能尚未确定，导致文字容器宽度推导异常 -
flex: 1 1 0中的0是像素值，等价于flex-basis: 0px，强制从零开始分配空间，配合min-width: 0后宽度才真正可控
Safari 旧版本对 flex-basis: 0 解析不稳定，建议兜底写成 flex: 1 1 0% 或保留 min-width: 0。
真正卡住的往往不是某一行代码，而是这四者是否落在同一元素上 —— 多一层 wrapper，少一个 display: block，就全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
