flex-shrink: 1无效的根本原因是默认min-width: auto阻止收缩，必须对直接子元素显式设置min-width: 0（水平布局）或min-height: 0（垂直布局）才能解锁收缩能力，否则其他样式均无法生效。
flex-shrink: 1 但子元素还是撑开容器？先看 min-width
Flex 子项默认 min-width: auto，它会把内容固有宽度（比如长 URL、连续英文、图片尺寸）当作不可压缩底线。哪怕你写了 flex: 1 或 flex-shrink: 1，浏览器也拒绝收缩——这不是 bug，是规范行为。
必须显式覆盖：给需要收缩的子元素加 min-width: 0。这是解锁 flex-shrink 的前提，漏掉它，其他所有设置都形同虚设。
-
min-width: 0只对直接含内容的 flex 子项生效，嵌套 flex 容器里的子项也要单独加 - 水平布局（
flex-direction: row）用min-width: 0；垂直布局用min-height: 0 - Firefox 对
min-width: auto执行更严格，别依赖 Chrome 的“悄悄妥协”
text-overflow: ellipsis 不生效？检查四件套是否齐备
只加 overflow: hidden 和 text-overflow: ellipsis 是不够的。省略号生效需要四个条件同时满足，缺一不可：
-
min-width: 0（已强调，这是开关） -
white-space: nowrap（必须写在文本所在元素上，不能写父级） -
overflow: hidden（裁剪动作本身） -
display: block或inline-block（text-overflow只对块级元素有效）
另外，父容器或该元素自身要有明确宽度约束（如 width、max-width 或稳定的 flex-basis），否则没有“可缩空间”，省略号永远不会触发。
立即学习“前端免费学习笔记（深入）”；
想让容器横向滚动？overflow-x: auto 为什么没反应
overflow-x: auto 不生效，大概率是因为容器没被“框住”。Flex 容器默认 width: auto，会随内容无限撑宽，根本不存在溢出，自然不显示滚动条。
必须同时满足三个条件：
- 父容器设显式
width或max-width（例如width: 100%、max-width: 600px） - 子元素设
flex-shrink: 0或flex: 0 0 auto（防止 Flex 自动压缩，否则内容压扁了，根本不会溢出） - 子元素内文本需
white-space: nowrap，否则提前换行，滚动需求消失
注意：overflow: auto 可能误触垂直滚动，优先用 overflow-x: auto。
flex-wrap: wrap 能解决一切溢出吗？要看设计约束
flex-wrap: wrap 是最直观的防溢出手段，但它只在允许换行时有效。如果业务要求必须单行（比如标签栏、导航栏），那它就不是解法，反而会破坏 UI。
此时必须组合使用 min-width: 0 + overflow: hidden（配省略号）或 overflow-x: auto（配滚动）。
还要注意兼容性陷阱：
- Safari 对
min-width: 0在某些嵌套 flex 场景下响应滞后，建议加will-change: transform微调 - 移动端长 URL 或无空格字符串，光靠
min-width: 0不够，得补overflow-wrap: break-word或word-break: break-all
真正容易被忽略的，不是某一行 CSS 写错，而是没意识到 min-width: auto 这个隐藏守门员——它不声不响地锁死了所有收缩逻辑，直到你亲手把它关掉。
