flex容器overflow:hidden无效的直接原因是容器未设width或max-width，导致浏览器无法确定溢出边界；必须显式设置尺寸约束（如max-width:400px）并确保overflow作用于容器而非子项。
flex容器overflow: hidden为什么没用
直接原因是容器没设width或max-width，浏览器根本不知道“溢出边界在哪”。overflow只对有明确尺寸限制的块级盒子生效，而display: flex容器默认是width: auto，会随子项撑开——此时加overflow: hidden形同虚设。
常见错误写法：
.container {<br> display: flex;<br> overflow: hidden; /* 无效：缺宽度约束 */<br>}
必须补上尺寸控制：
- 显式设
width或max-width（如max-width: 400px） - 若容器在Grid/绝对定位中，确认其父级已给块级尺寸约束
- 避免把
overflow: hidden错加在子项上——它只裁剪子项内部内容，不影响flex轴向伸缩
text-overflow: ellipsis不显示省略号
根本不是text-overflow失效，而是它压根没被触发。Flex子项默认min-width: auto，浏览器优先保全文本完整显示，哪怕撑破容器也不截断；同时flex-shrink: 1会让它主动压缩宽度，导致文字没机会“溢出”。
必须在同一元素上同时满足五个条件：
-
min-width: 0（关键起点，覆盖默认auto） -
flex: 1 1 0（比flex: 1更可控，避免flex-basis: 0%计算偏差） -
white-space: nowrap（强制单行，否则文字提前折行） -
overflow: hidden（裁剪动作本身） -
text-overflow: ellipsis（只负责画省略号）
且该元素需为块级（如<div>），<code><span></span>要先加display: block。
子元素margin-top/bottom“穿透”父容器
这不是margin失效，是Flex容器未形成BFC，导致子项外边距与父容器发生塌陷。尤其当容器没设height、min-height等尺寸约束时，浏览器视其为无高度包裹层，margin-top就直接作用到外部上下文了。
最稳妥解法是让容器主动隔离边距影响：
- 加
overflow: hidden或overflow: auto（哪怕内容不溢出，也能强制创建BFC） - 用
padding替代子项margin：把margin-top: 20px拆成父容器padding-top: 20px+ 子项margin: 0 - 现代布局优先用
gap控制子项间距——它不触发塌陷，也不参与flex-shrink计算
box-sizing: border-box能解决溢出吗
不能。它只影响元素自身盒模型的尺寸计算（padding和border是否计入width），跟Flex子项是否溢出容器完全无关。溢出本质是flex算法对空间分配和收缩的处理逻辑问题，和box-sizing无因果关系。
真正起作用的是这些组合：
-
flex-shrink是否被禁用（如误设flex-shrink: 0） - 子项是否含固有尺寸内容（如
<img>、长URL、无空格字符串） - 是否遗漏
min-width: 0或flex-basis: 0这类收缩前提 - 嵌套Flex场景下，每一层需要收缩的子项都得单独设
min-width: 0
容易被忽略的是：嵌套Flex里，外层加了min-width: 0，内层文本容器照样会溢出——因为内层Flex容器自己也得加这一条。
