min-width: 0本身不是Bug，而是必须逐层加在嵌套Flex每一级直接子项上，并配齐flex: 1 1 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis及display: block，且父容器需有明确宽度约束。
只加 min-width: 0 不会触发文本截断，它只是解除收缩锁死的起点；必须和 flex: 1 1 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 同时作用于**直接含文本的元素**才有效。
为什么 min-width: 0 加了还是溢出
根本不是 CSS 失效，而是它只对 Flex **直接子项**生效，且不自动激活后续裁剪逻辑：
- 加在父容器（如
.card）上完全无效——浏览器只检查子项自身的min-width计算值 - DevTools 里
min-width仍显示auto？说明被其他规则覆盖，或漏写了 - 用了
flex: 1简写 → 它等价于flex: 1 1 0%，而0%在内容未渲染前推导不稳定，容易卡住截断链 -
min-width: 0px或min-width: 0%在旧版 Safari/Firefox 中可能被忽略，必须用无单位的min-width: 0
min-width: 0 必须和哪些样式同级写
缺任意一个，text-overflow: ellipsis 都不会出现：
-
flex: 1 1 0：明确flex-basis为像素值，避免百分比推导异常 -
white-space: nowrap：必须写在目标元素上（如span），不能靠父级继承；否则文字提前换行，压根不进入“单行溢出”流程 -
overflow: hidden：只裁剪已溢出的内容；若min-width: auto还在锁宽度，容器被撑大，这行就等于没执行 -
text-overflow: ellipsis：仅对块级元素生效；span类行内元素必须同步加display: block或display: inline-block
嵌套 Flex 容器里最容易漏掉哪几层
每级 Flex 子项都自带 min-width: auto，漏一层就会翻车：
立即学习“前端免费学习笔记（深入）”；
- 最外层 Grid Item 或绝对定位容器中的 Flex 容器（如
.grid-cell { display: flex; min-width: 0; }） - 该 Flex 容器的直接子项中需伸缩的元素（如
.grid-cell > .content { flex: 1 1 0; min-width: 0; }） - 最终装文本的叶子节点（如
.content > span、.content > img）——span尤其容易被忽略，它不会继承父级min-width: 0 - 如果内层还有
display: flex（比如头像 + 文字 + 按钮），文字所在元素（如.info > .title）也得单独加min-width: 0
长 URL 或连续英文单词还溢出怎么办
这类纯无空格字符串默认不折行，min-width: 0 + 四件套只能保证容器可缩，但无法创造“溢出边界”：
- 允许折行：补
overflow-wrap: break-word（语义准确，推荐）或word-break: break-word；避免用word-break: break-all，它会破坏英文标题可读性 - 坚持单行截断：确保父容器有明确
width或max-width；否则 Flex 容器按内容自适应，根本不存在“溢出”前提 - 别全局设
word-break: break-all，应限定在.url、.log-token这类 class 上 -
img、input等替换元素不响应min-width: 0，要单独配max-width: 100%或width
真正复杂的是层级判断——你得一层层打开 DevTools，盯着每一级 Flex 子项的 computed min-width，只要还显示 auto，就说明那层没加到位。这不是写一次就能跑通的规则，而是需要逐节点确认的调试过程。
