min-width: 0 是解除 flex 子项默认 min-width: auto 锁定的必要条件，需与 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及 display: block 同时作用于同一元素，并配合 flex: 1 1 0 或明确宽度才能实现稳定省略。
为什么只加 min-width: 0 还是溢出
它不是万能开关，只是解除浏览器对 flex 子项的隐式锁定。Flex 子项默认 min-width: auto，意思是“至少得显示完整单词或 URL”，哪怕父容器只有 200px，它也拒绝压缩——结果就是撑破布局，overflow: hidden 和 text-overflow: ellipsis 全部失效。DevTools 里看 computed 值，如果 min-width 还是 auto，基本就确认问题根源了。
常见错误包括：
• 把 min-width: 0 写在父容器（如 .list）上，而不是目标子元素（如 .title）
• 混用 min-width: 0px 或 min-width: 0%，只有无单位的 min-width: 0 是标准写法，兼容性最稳
• 在嵌套 Flex 中，只在外层加，内层含文本的子项（如 .info > span）没加，照样撑开
min-width: 0 必须和哪几个样式一起用
它只负责“解锁收缩”，真正让省略号出现，得四件套同置同一元素：
-
white-space: nowrap：必须写在含文本的元素上，否则文字提前折行，压根不触发单行溢出 -
overflow: hidden：裁剪动作本身，但若没min-width: 0，它常对 flex 子项无效 -
text-overflow: ellipsis：纯装饰层，不参与尺寸计算，只在前两者满足时才画点 -
display: block：行内元素（如span）必须显式设为块级，否则text-overflow不生效
另外，该元素还得有明确宽度来源：要么父容器设了 width 或 max-width，要么自身用了 flex: 1 1 0（推荐，比 flex: 1 更可控）。
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-basis: 0%兜底
别用 flex: 0 1 200px 这类带固定 flex-basis 的写法，小屏下反而更容易溢出。
容易被忽略的嵌套与兼容性坑
真正卡住的往往不是 min-width: 0 本身，而是它是否和其余三件套落在同一元素上，以及是否被其他样式悄悄覆盖：
-
<img>或<iframe></iframe>有固有尺寸，必须额外加max-width: 100%和height: auto - 子项用了
padding但没设box-sizing: border-box，padding 会叠加在flex-basis之外，直接超限 - 移动端 Safari 可能误读
min-width: -webkit-fit-content，覆盖掉min-width: 0，务必检查 computed 样式确认 - 表单控件（如
input）默认box-sizing: content-box，必须同时设box-sizing: border-box和min-width: 0
最常漏的是：忘了给父容器设 width 或 max-width，或者把 overflow: hidden 错加在 wrapper 层而非实际发生溢出的元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
