根本原因是父容器无明确高度约束且Flex子项默认min-height:auto/min-width:auto阻止收缩，需在直系子项加min-height:0或min-width:0解除锁定，并分层设置overflow-y:auto于包裹层而非外层Flex容器。
Flex父容器加了overflow: hidden却挡不住子元素溢出，不是样式没生效，而是它根本没进入裁剪逻辑——因为“溢出”压根没发生。
为什么父容器明明写了overflow: hidden，子项还是撑出来？
核心原因：父容器没有明确高度约束，被子项完全撑开，实际尺寸始终 ≥ 内容尺寸，浏览器判定“无溢出”，overflow: hidden直接被跳过。
- 常见于
display: flex; flex-direction: column容器未设height、max-height或flex: 1但外层无高度上下文（比如html, body { height: 100% }漏了） - 用 DevTools 查看父容器的
computed height和scrollHeight，若两者相等，说明确实没溢出 -
overflow: hidden在 Flex 容器上只管“裁剪”，不管“收高”；它不改变 flex 子项的默认最小尺寸行为
Flex子项默认min-width: auto / min-height: auto才是真凶
Flex 直接子元素默认带min-width: auto（主轴为 row）或min-height: auto（主轴为 column），这会让它拒绝压缩，哪怕父容器已定高——结果就是内容顶破边界，overflow: hidden连裁剪对象都找不到。
- 必须显式给**直接子项**加
min-width: 0（横向布局）或min-height: 0（纵向布局），不能加在父容器或孙子节点上 -
min-width: 0写成min-width: 0px在 Firefox 中可能被忽略，务必用无单位写法 - 若该子项内部还有 Flex 布局（如头像+文字行），内层需单独再加
min-width: 0，否则溢出会“穿透”
overflow: hidden加错层级或搭配缺失也白搭
overflow: hidden必须作用在真正承载溢出内容的那层容器上，且常需配合其他约束才能起效。
立即学习“前端免费学习笔记（深入）”；
- 别只在外层 wrapper 加
overflow: hidden，而把滚动/截断逻辑放在子项里——层级错位，裁剪失效 - text-overflow: ellipsis 要生效，
min-width: 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis四者必须同级共存，缺一不可 - 含
<img>时，仅加min-width: 0不够，还得补max-width: 100%，否则图片固有宽高仍会撑破 - 父容器本身要是块级且有宽度约束（如
width: 300px或max-width: 100%），否则子项再怎么缩也没意义
为什么Flex/Grid父容器上overflow: hidden不创建BFC包裹浮动？
现代 Flex 和 Grid 容器即使设了overflow: hidden，也不会像传统 block 容器那样自动包裹浮动子元素——它们的布局模型不依赖 BFC 计算高度，浮动子项在其中行为异常，甚至可能被强制 inline 化。
- 若你还在靠
overflow: hidden清浮动，应改用display: flow-root，语义清晰且兼容性更好 - 父容器自身若设了
float、position: absolute或display: inline-block，它自己已脱离文档流，overflow: hidden无法触发 BFC - 避免同时使用
overflow: hidden和transform或filter，它们会创建新层叠上下文，干扰 BFC 触发
最常被忽略的是：你以为问题出在overflow: hidden本身，其实得先确认父容器有没有被真正“框住”——高度是否明确、子项是否锁死最小尺寸、裁剪层级是否正确。这三个点任一缺失，overflow: hidden就只是 CSS 文件里一行安静的注释。
