必须给含文本的Flex直接子元素加min-width: 0，否则截断、换行、滚动均失效；因其默认min-width: auto会阻止收缩，导致overflow等样式无法触发。
必须给含文本的 Flex 直接子元素加 min-width: 0，否则所有截断、换行、滚动控制都会失效——这不是样式没写对，而是浏览器根本没给它收缩的机会。
为什么 min-width: 0 是绕不开的第一步
Flex 子项默认 min-width: auto，意思是“至少得容下最长单词或 URL”，哪怕父容器只有 100px 宽，它也宁可撑破也不缩。你加了 overflow: hidden 或 text-overflow: ellipsis，结果什么都没发生，就是因为内容压根没进裁剪流程——容器早被撑开了。
-
min-width: 0必须写在**直接含文本的子元素上**，不是父容器，也不是嵌套一层后的<div><p>文本</p></div>中的<p></p>外层 - DevTools 的 Computed 面板里，确认该元素的
min-width真的是0px（不是auto，也不是0%） - 如果同时写了
flex-shrink: 0，min-width: 0就被绕过，得先删掉或改成flex-shrink: 1
text-overflow: ellipsis 不生效？检查这四点是否全在同一个元素上
省略号不是开关，是四个条件共同作用的结果，漏一个就白配：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0（已强调，这是前提） -
white-space: nowrap（必须写在目标元素上，不能靠继承；表格单元格、按钮等默认是normal） -
overflow: hidden（裁剪动作本身，加在外层 wrapper 上无效） -
display: block或inline-block（text-overflow对inline元素不生效）
另外，该元素自身或父容器得有明确宽度来源：width、max-width 或稳定 flex-basis（推荐用 flex: 1 1 0，别用 flex: 1，后者等价于 flex: 1 1 0%，计算不稳定）。
长 URL 或连续英文仍撑开？补上 overflow-wrap: break-word
即使五件套齐了，https://example.com/very-long-path 这类无空格字符串还是可能突破限制——因为浏览器默认不拆分单词。这时 overflow-wrap: break-word 才真正起效，但它有个硬前提：
- 先有
min-width: 0解锁收缩权限 - 再设
max-width: 100%（或具体值如max-width: 300px），给换行提供参照宽度 - 最后加
overflow-wrap: break-word（word-wrap: break-word仍可兼容） - 避免和
word-break: break-all混用——后者会在任意字符间切分，破坏可读性
移动端尤其注意：flex-direction: column 下，min-width: 0 不影响垂直伸缩，但文本截断仍在水平方向发生，所以子项自己必须设 max-width: 100%。
调试时最该盯住的三个 computed 值
打开 DevTools → Computed 面板，直接查这三项：
- 目标元素的
min-width是否为0px（不是auto，也不是0%） -
flex-basis是否稳定为0px（flex: 1 1 0应推导出这个值） -
white-space是否为nowrap（不是normal或pre）
这些值不对，代码写得再全也没用。真正难的不是记住 min-width: 0 这个写法，而是每次遇到溢出都得回头确认：父容器有没有 width 或 max-width、子项是不是 Flex 直接子、min-width 是否被其他规则覆盖、文本三件套有没有写全——漏掉任意一环，效果就消失。
