嵌套Flex容器溢出需逐层设置min-width: 0，因每级flex子项默认min-width: auto会锁定最小宽度；同时需配合white-space: nowrap、overflow: hidden、display: block及明确宽度约束才能实现文本截断。
嵌套Flex容器溢出时，min-width: 0必须逐层加
嵌套Flex容器溢出，根本原因是每级flex子项都继承了默认的min-width: auto——浏览器会按最长不可折行内容（比如一串无空格URL）锁定最小宽度，哪怕父容器已缩到极限，它也拒绝收缩。只在外层加min-width: 0没用，内层flex容器若含文本或图片，照样撑爆。
实操要点：
- 检查DevTools中每一级含文本/图片的flex子项的computed
min-width，只要还是auto，就说明没生效 - 必须给「直接承载内容」的元素加
min-width: 0，例如.item > span、.info > img，而不是笼统加在.item上 - 旧版Safari对
min-width: 0支持不稳定，避免写成min-width: 0px或min-width: 0% - 如果内层是
display: flex的容器（如头像+文字+按钮），且其中文字需截断，那文字所在元素（如.text）也要单独加min-width: 0
overflow: hidden在嵌套Flex里不生效？先看容器有没有尺寸约束
overflow: hidden在嵌套Flex中失效，90%是因为flex容器本身没被赋予明确宽度——它默认width: auto，会随子项无限撑开，浏览器根本不知道“溢出边界在哪”。你给子项设overflow也没用，裁剪只作用于该子项内部，不影响flex轴向伸缩。
关键动作：
立即学习“前端免费学习笔记（深入）”；
- 给最外层flex容器加
max-width（如max-width: 400px）或width，这是overflow起效的前提 - 若外层在Grid或绝对定位上下文中，确认其块级尺寸是否已被父级约束；否则
overflow仍形同虚设 - 别把
overflow: hidden错加在flex子项上——要加在「发生溢出的flex容器」本身 - 配合
flex-shrink: 1（默认值）确保子项能参与压缩，否则固定宽元素会直接顶破容器
文本截断四件套缺一不可：min-width: 0 + white-space: nowrap + overflow: hidden + display: block
想让嵌套Flex里的单行文本显示省略号，text-overflow: ellipsis只是“画点”的装饰层，它不控制尺寸。漏掉任意一个前置条件，效果就消失。
必须同时满足：
-
min-width: 0：解除浏览器默认的min-width: auto锁死 -
white-space: nowrap：写在目标元素上，不能靠父级继承；否则文字提前换行，压根没机会单行溢出 -
overflow: hidden：裁剪动作本身，但没min-width: 0时，子项被撑大，文本根本没溢出 -
display: block或display: inline-block：因为text-overflow只对块级元素生效，span这类行内元素必须显式声明 - 明确宽度约束：推荐
flex: 1 1 0替代单纯flex: 1，让基础宽度从0开始计算
justify-content: center导致滚动时内容不可见？用safe关键字兜底
当flex容器设了justify-content: center且flex-wrap: nowrap，内容溢出后滚动，常出现只能看到右半边、左半边永远滚不到的问题——这是因为居中对齐把内容锚点定在容器中心，超出部分被切掉。
Chrome 115+支持safe关键字，能自动降级：
-
justify-content: safe center：内容未溢出时居中；溢出时自动退化为flex-start，保证所有内容可滚动访问 - 不支持
safe的浏览器（如旧版Safari），需手动用媒体查询+justify-content: flex-start做fallback - 注意
safe只影响主轴对齐，交叉轴（align-items）不受影响
min-width: auto、每层缺少尺寸约束、每层white-space未统一控制。解决它不是加一个属性的事，而是逐层确认、逐层覆盖。最容易被忽略的是——你以为修复了外层，其实内层flex容器里的文本正悄悄撑爆整个结构。 
