答案是min-width: auto为Flex子项默认隐式限制，需显式设min-width: 0解除；必须加在直系flex子项上，并与white-space: nowrap、overflow: hidden、text-overflow: ellipsis及display: block同置同一元素才生效。
min-width: auto 是 Flex 子项溢出的根源
Flex 子项默认 min-width: auto，不是“没设”，而是浏览器硬编码的隐式规则。它会让子项死守内容自然宽度（比如一个长 URL 或连续无空格英文），宁可撑破父容器、触发横向滚动，也不允许 flex-shrink 起作用。你看到的“溢出”，其实是浏览器在执行这个默认限制——它根本没尝试收缩。
min-width: 0 不是让元素变小，而是解除锁定
min-width: 0 的作用不是把元素压到 0px 宽，而是显式覆盖 min-width: auto，告诉 Flex 布局：“这个子项可以缩得比内容还小”。只有这一步做完，后续的 flex: 1 1 0、overflow: hidden 才有机会生效。DevTools 里如果 min-width 的 computed 值仍是 auto，基本就能断定问题卡在这儿。
text-overflow: ellipsis 失效，往往因为四件套没落在同一元素上
单行省略号不是靠 text-overflow: ellipsis 单独驱动的，它只负责“画点”，前提是：min-width: 0 + white-space: nowrap + overflow: hidden + display: block 必须全部写在**同一个直接包裹文本的元素上**。常见错误包括：
- 把
overflow: hidden加在父容器（如.item），而文本在.title里——裁剪不作用于文字本身 - 用
<span></span>包文本但没加display: block，text-overflow对行内元素无效 - 父容器没设
width或max-width，Flex 容器按内容自适应，根本不存在“剩余空间”供收缩
嵌套 Flex 容器必须逐层加 min-width: 0
如果结构是 .card（flex）→ .info（flex）→ .text（文本），只给 .card 或 .info 加 min-width: 0 没用。.text 作为最内层 flex 子项，也继承了 min-width: auto。必须检查每一级实际承载内容的元素，只要它的 computed min-width 还是 auto，就得加 min-width: 0。图片或 iframe 这类固有尺寸元素，还得额外配 max-width: 100% 和 height: auto。
立即学习“前端免费学习笔记（深入）”；
