flex子项撑破容器是因为默认min-width: auto（主轴为row时）或min-height: auto（主轴为column时），浏览器按内容固有尺寸推算最小尺寸，宁可撑破也不压缩；此时未发生溢出，overflow不生效。
flex子项为什么撑破容器？根源是min-width: auto
不是你的overflow: hidden写错了，而是flex子项默认带min-width: auto（主轴为row时）或min-height: auto（主轴为column时）。浏览器会按内容固有尺寸（比如一张200px宽的图片、一段未折行的长URL）推算最小宽度下限，宁可撑破父容器，也不压缩内容。此时“溢出”根本没发生，overflow自然不触发。
典型表现包括：text-overflow: ellipsis不显示、卡片被顶宽、加了white-space: nowrap却依然换行。打开DevTools检查该子元素的computed min-width，若仍是auto，基本可锁定是这个问题。
必须给哪个元素加min-width: 0？只作用于直接子项
min-width: 0只对display: flex容器的**直接子项**生效，且必须加在你希望它收缩的那个元素上——不是父容器，也不是孙子节点。
- ❌ 给
.container加min-width: 0无效：它只限制自身宽度，不影响子项收缩逻辑 - ❌ 动态class中只把
min-width: 0放在.truncate里，但该class未激活 → 白写 - ❌ 子项内部是嵌套Flex（如头像+文字块），只在外层加
min-width: 0，内层文字容器仍受min-width: auto锁定 - ✅ 正确做法：给含文本的
<p></p>或<span></span>（需先设display: block）显式设min-width: 0
text-overflow: ellipsis生效的四个硬条件缺一不可
text-overflow: ellipsis不是开关式属性，它依赖四个条件同时成立：
- 目标元素必须是块级盒：
display: block或inline-block（默认inline不生效） -
white-space: nowrap：强制单行，否则文字提前折行，根本不到“溢出”那步 -
overflow: hidden（或overflow-x: hidden）：裁剪动作本身，但没min-width: 0时子项压根不缩，overflow就无内容可裁 - 明确宽度约束：不能只靠
flex: 1，推荐用flex: 1 1 0（第三个参数是像素值，起点确定），避免flex-basis: auto推导异常
若子项含<img>，额外加max-width: 100%，否则图片固有尺寸会撑破限制。
父容器自身必须有宽度约束，否则一切白搭
所有截断逻辑都建立在一个基础之上：父容器自身得有明确宽度约束。没有width、max-width或弹性上下文（如兄弟项已占满的flex: 1），容器宽度就是无限的，“溢出”不存在，min-width: 0、text-overflow、overflow全等于没加。
特别注意：overflow: hidden必须加在真正发生溢出的那层容器上；加错层级（比如只加在外层wrapper）等于没加。另外，移动端慎用user-scalable=no，它可能干扰视口计算，间接导致宽度推导异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
