Flex子项默认min-width: auto导致撑破容器，需逐层在直接承载内容的元素上设min-width: 0；overflow: hidden须加在外层有宽度约束（如max-width）的Flex容器上；text-overflow: ellipsis需同时满足min-width: 0、white-space: nowrap、overflow: hidden、display: block/inline-block。
flex子项默认min-width: auto锁死宽度
Flex嵌套时子元素撑破容器，根本不是“没写overflow”或“没设width”，而是每层flex子项默认带min-width: auto（主轴为row时）。浏览器会按最长不可折行内容（比如一串URL、长英文单词）锁定最小宽度，哪怕父容器已缩到极限，它也拒绝收缩。DevTools里检查computed min-width，只要还是auto，就说明这个锁没解开。
常见现象包括：text-overflow: ellipsis不显示、卡片被顶宽、white-space: nowrap下仍换行。
必须逐层加min-width: 0，且只加在「直接承载内容」的元素上：
- ❌
.item { min-width: 0 }—— 如果.item内部是display: flex，那它的子项（如.text）仍被min-width: auto锁住 - ✅
.item > .text { min-width: 0 }—— 文本所在元素显式设为0 - ✅
.item > img { min-width: 0; max-width: 100% }—— 图片也要加，否则固有尺寸优先
overflow: hidden加错层级或缺宽度约束
overflow: hidden在嵌套Flex里失效，90%是因为容器本身没被框住：Flex容器默认width: auto，会随子项无限撑开，浏览器根本不知道“溢出边界在哪”。你给子项加overflow，只裁它自己内部，不影响主轴伸缩。
立即学习“前端免费学习笔记（深入）”；
关键动作只有两个：
- 给最外层flex容器加
max-width或width（如max-width: 400px或width: 100%） -
overflow: hidden必须加在这层容器上，而不是它的子项
如果外层在Grid或position: absolute上下文中，还要确认其块级尺寸是否已被父级约束；否则overflow形同虚设。
文本截断四件套漏一不可
想让单行文本显示text-overflow: ellipsis，四个条件必须同时成立，缺一就白配：
-
min-width: 0：解除min-width: auto锁死（加在目标文本元素上） -
white-space: nowrap：必须写在目标元素上，不能靠父级继承 -
overflow: hidden：裁剪动作本身（加在该元素或其直接父容器上） -
display: block或display: inline-block：因为text-overflow只对块级盒生效，span类行内元素必须显式声明
示例结构：
.card {
display: flex;
max-width: 300px;
overflow: hidden;
}
.card-content {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
嵌套Flex中用gap代替margin防溢出
子项用margin-right或margin-bottom分隔，是溢出高发区——Flex不自动压缩子项来容纳它们的外边距。改用容器级gap更干净：
-
gap由父容器统一控制，不参与子项尺寸计算 - IE完全不支持
gap，需兼容时回退到margin+ 显式box-sizing: border-box+ 宽度重算 - 若必须用
margin，务必检查每个子项的border-box width是否真等于你预期的分配值，别靠猜
真正麻烦的不是属性本身，而是它们混在flex弹性计算里又不报错，只悄悄撑破布局。盯住DevTools里“Computed”面板里的实际尺寸，比翻文档管用。
