必须加在子元素上，因flex子项默认min-width: auto锁定最小宽度，该限制仅作用于直接子项且不继承；min-width: 0需与white-space: nowrap、overflow: hidden、text-overflow: ellipsis同级作用于同一块级元素，并配合明确宽度约束才生效。
为什么min-width: 0是必须加在子元素上
Flex子项默认min-width: auto，浏览器会按最长不可折行内容（比如https://example.com/very-long-path）锁定最小宽度，哪怕你写了width: 100%或flex: 1，它也拒绝收缩。这个限制只作用于**直接子项**，父容器设min-width: 0完全无效——它不传递、不继承，只检查该元素自身的computed值。
DevTools里看Computed面板，如果min-width仍是auto，就说明没生效。常见错误包括：写在.container上、用min-width: 0px（部分旧Safari不认）、或动态class没触发（如className={`item ${isTruncated ? 'truncate' : ''}`>里.truncate没被激活）。
text-overflow: ellipsis不显示省略号的硬性条件
text-overflow: ellipsis不是开关，它只在四个条件同时满足时才画点：
-
white-space: nowrap必须写在目标文本元素上（如<span></span>），不能写父容器——否则文字提前折行，根本没机会单行溢出 -
overflow: hidden必须同级加在同一元素上，且该元素得是块级；<span></span>类行内元素要先加display: block -
min-width: 0必须存在，否则flex-shrink被内容宽度卡住，裁剪逻辑压根不触发 - 父容器要有
width或max-width约束，否则Flex容器按内容自适应，不存在“剩余空间”供收缩
漏掉任意一条，省略号就永远不会出现。尤其注意：这四者必须落在**同一元素**上，嵌套结构里外层加了，内层文本仍需单独加。
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的写法，小屏下反而更容易溢出
嵌套Flex和替换元素的坑
溢出问题常藏在深层结构里：
- 子项内部还有Flex容器（如头像+文本+按钮），内层需收缩的子项也得单独加
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样式确认
真正卡住的往往不是min-width: 0本身，而是它和overflow: hidden、white-space: nowrap、text-overflow: ellipsis这四者是否落在同一元素上——写错层级、漏掉一个、或加在行内元素却没转display: block，都会让整个链路失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
