根本原因是Flex子项默认min-width:auto锁死最小宽度，导致内容撑开容器、overflow:hidden未被触发；必须在直接子元素上设min-width:0，并配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis及明确宽度约束。
不是 overflow: hidden 写错了，而是它根本没触发——Flex 子项默认锁死最小宽度，浏览器压根不认为内容“溢出”了。
flex 直接子项的 min-width: auto 是罪魁祸首
Flex 主轴为 row 时，每个直接子项默认带 min-width: auto（column 时是 min-height: auto），意思是“至少要撑到内容自然宽”。哪怕父容器只有 200px 宽，一个含长 URL 的 <span></span> 也会强行撑开，overflow: hidden 连裁剪入口都进不去。
- 检查方式：DevTools → Computed → 搜
min-width，若值仍是auto，就是它 - 必须加在 flex 容器的**直接子元素**上，比如
.content（不是.container，也不是.content span） - 写法只能是
min-width: 0（无单位），min-width: 0px在 Firefox 中可能被忽略
text-overflow: ellipsis 生效需要四件套共存
只写 overflow: hidden 和 text-overflow: ellipsis 不够。这四个条件缺一不可，且必须写在同一元素上：
-
min-width: 0（解除 Flex 锁定） -
white-space: nowrap（强制单行，否则文字提前折行） -
overflow: hidden（裁剪动作） - 明确宽度约束：
width、max-width或可靠的flex-basis；仅靠flex: 1不行，因为它的基础宽度仍是auto
图片、内联元素和嵌套 flex 容易漏处理
这些元素同样受 min-width: auto 影响，但表现更隐蔽：
-
<img>必须配max-width: 100%，否则固有尺寸会绕过所有限制 - 内联元素（如
<span></span>）需先设display: block或inline-block，否则text-overflow不生效 - 若子项自身是
display: flex（比如头像+文字组合），其内部文本容器还得再加一遍min-width: 0 - 动态 class 切换（如
className={`item ${isTruncated ? 'truncate' : ''}`}）中，min-width: 0必须始终存在，不能只放在条件 class 里
父容器没尺寸约束，一切白搭
很多人加了一堆 min-width: 0 和 overflow: hidden，结果还是溢出——根源常在父层：
- Flex 容器自身必须有明确宽度：比如
width: 100%、max-width: 400px，或由外层 flex 约束（如flex: 1+ 父容器有width） - 移动端尤其注意：iOS Safari 对
width: 100%嵌在 flex 里的容器，可能直接忽略overflow: hidden - 如果父容器用了
transform（哪怕只是translateZ(0)），它会创建新包含块，此时overflow: hidden才真正生效，但也可能意外解除圆角裁剪上下文
真正难处理的从来不是怎么写 overflow: hidden，而是哪一层 min-width 没重置、哪个 transform 松动了裁剪边界、哪一行 margin 推开了圆角内边缘——这些细节往往只在真机或动画帧里暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
