加min-width: 0是唯一能打开Flex子项收缩能力的开关，必须作用于flex直接子元素以解除min-width: auto隐式限制，再配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束才生效。
加 min-width: 0 是唯一能打开 Flex 子项收缩能力的开关，不加它，overflow: hidden 和 text-overflow: ellipsis 全部失效。
为什么 min-width: 0 必须加在 flex 直接子元素上
Flex 的收缩逻辑只检查直接子项自身的 min-width 计算值。浏览器默认给每个 flex 子项设了 min-width: auto（等价于 min-width: fit-content），意思是“至少得容下最长单词或一整串无空格 URL”。哪怕父容器只有 100px 宽，它也拒绝压缩——结果就是文字把整个布局顶开。
- ✅ 正确写法：
.title { min-width: 0; }，其中.title是display: flex容器的直接子元素 - ❌ 无效写法：
.container { min-width: 0; }，父容器设这个对子项毫无影响 - ⚠️ 嵌套场景下，比如
.info是 flex 容器，里面还有.text要截断，那.text也得单独加min-width: 0，不会继承 - ? DevTools 里检查 computed 样式，如果
min-width还是auto，说明 selector 没命中，或者被其他规则覆盖（比如误写了min-width: 0px）
min-width: 0 单独写没用，必须配齐这三样
min-width: 0 只是解除收缩限制，不是自动截断。要让省略号出现，还得在同一元素上同时满足：
-
white-space: nowrap：防止文字提前折行，确保“单行溢出”前提成立 -
overflow: hidden：裁剪动作本身，但没min-width: 0时，子项压根不缩，它就无内容可裁 -
text-overflow: ellipsis：只负责画点，不控制尺寸，且仅对块级元素生效——所以还得加display: block或display: inline-block - ⚠️ 父容器必须有明确宽度约束，比如
max-width: 400px或width: 100%；否则 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-basis: 0%兜底，或保留min-width: 0 - 别用
flex: 0 1 200px这类带固定flex-basis的写法，小屏下反而更容易溢出
含长 URL 或无空格字符串时额外要加什么
即使配齐四件套（min-width: 0 + white-space: nowrap + overflow: hidden + text-overflow: ellipsis），一串连续英文、base64 或哈希值仍可能撑破容器——因为浏览器默认不拆分这类字符串。
- 必须补充
word-break: break-word（Chrome 15+、Firefox 15+、Safari 9+） -
word-break: break-all更激进，会强行在任意字符间断行，适合纯技术字符串（如哈希），但语义不友好 -
overflow-wrap: break-word是更推荐的语义化选择，优先在空白处断，实在不行再拆单词 - ⚠️ 注意：
<img alt="如何用CSSmin-width:0修复Flex文本溢出" >或<iframe></iframe>有固有尺寸，必须额外加max-width: 100%和height: auto，否则它们会无视min-width: 0
真正卡住的往往不是 min-width: 0 本身，而是它和 overflow: hidden、white-space: nowrap、text-overflow: ellipsis 这四者是否落在同一元素上，且该元素是否为块级、是否有明确宽度约束——漏掉任意一个，省略号就永远不会出现。
