必须给flex直接子元素加min-width: 0，否则overflow: hidden和text-overflow: ellipsis全部失效；因其默认min-width: auto锁定最小宽度，该限制仅作用于自身、不继承、不传递，需与white-space: nowrap、overflow: hidden、display: block及明确宽度约束同级作用于同一元素。
必须给 flex 直接子元素加 min-width: 0，否则所有截断样式（overflow: hidden、text-overflow: ellipsis）全部失效——浏览器在布局阶段就拒绝压缩，根本没走到“溢出裁剪”这一步。
为什么 min-width: 0 必须加在直接子元素上
Flex 子项默认 min-width: auto（等价于 min-width: min-content），意思是“至少得容下最长不可折行内容”，比如 https://example.com/very-long-path 或连续无空格英文。这个限制只检查该元素自身的 computed min-width 值，不继承、不传递、不被父容器设置影响。
- ✅ 正确：
.title { min-width: 0; }，其中.title是display: flex容器的直接子元素 - ❌ 无效：
.container { min-width: 0; }，父容器设这个对子项宽度零作用 - ⚠️ DevTools 中看 Computed 面板，如果
min-width还是auto，说明选择器没命中，或被其他规则覆盖（如误写成min-width: 0px） - ⚠️ 嵌套 Flex 场景（如头像 + 文本块再包一层
flex），内层需收缩的文本容器（如.text）也得单独加min-width: 0
text-overflow: ellipsis 不显示的硬性条件
text-overflow: ellipsis 不是开关，它只在四个条件**同时满足且落在同一元素上**时才生效：
-
min-width: 0：解除 Flex 收缩锁（主轴为 row 时） -
white-space: nowrap：必须写在目标文本元素上，写在父级会导致文字提前换行，失去“单行溢出”前提 -
overflow: hidden：裁剪动作本身，但没min-width: 0时子项压根不缩，它就无内容可裁 -
display: block或display: inline-block：因为text-overflow只对块级盒生效，默认<span>是 inline - 父容器要有
width或max-width约束，否则 Flex 容器按内容自适应，不存在“剩余空间”供收缩
flex: 1 和 flex: 1 1 0 对截断的实际影响
表面都占剩余空间，但第三个参数 flex-basis 决定宽度推导是否稳定：
立即学习“前端免费学习笔记（深入）”；
-
flex: 1等价于flex: 1 1 0%，其中0%是百分比，需依赖父容器当前宽度计算；而 Flex 布局中父宽可能尚未确定，容易导致文字容器宽度推导异常 -
flex: 1 1 0中的0是像素值，等价于flex-basis: 0px，强制从零开始分配空间，配合min-width: 0后宽度才真正可控 - 旧版 Safari（≤15.6）对
flex-basis: 0支持不稳，建议兜底写法：flex: 1 1 0; flex-basis: 0%; - 避免用
flex: 0 1 200px这类带固定flex-basis的写法，小屏下反而更容易溢出
嵌套结构与替换元素的常见漏点
溢出问题常藏在深层结构里，光在外层加 min-width: 0 不够：
- 子项内部还有 Flex 容器（如头像 + 文本 + 按钮），内层需收缩的子项（如
.text）也得单独加min-width: 0 -
<img>或<iframe>有固有尺寸，必须额外加max-width: 100%和height: auto - 子项用了
padding却没设box-sizing: border-box，padding 会叠加在flex-basis之外，悄悄撑破容器 - 移动端 Safari 可能误读
min-w-fit覆盖掉min-w-0，务必在 DevTools 中确认 computedmin-width真实值
真正卡住的往往不是 min-width: 0 本身，而是它和 overflow: hidden、white-space: nowrap、text-overflow: ellipsis 这四者是否落在同一元素上，以及该元素是否有明确宽度约束——缺一不可，且顺序无关，但位置必须精准。
