flex子项不收缩的根本原因是默认min-width:auto锁定最小尺寸，必须在直系flex子项上显式设置min-width:0，并配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis才能实现有效截断。
flex子项不收缩？先查min-width: auto默认行为
移动端 flex 布局溢出，八成是因为子项被 min-width: auto 锁死了——浏览器认为“内容多宽，我就得多宽”，哪怕是一长串无空格 URL 或连续英文单词，它也拒绝压缩，直接撑破容器。
这不是 bug，是 CSS 规范明确规定的默认行为。解决办法不是暴力禁用 flex-shrink，而是显式覆盖这个底线：
-
min-width: 0必须加在**直系 flex 子项**上（比如.item、.content），不是父容器 - 如果子项内部还有 flex 布局（如头像+文字+按钮组成的卡片），内层容器也得加
min-width: 0，否则溢出会“穿透”进来 - 别在 flex 项目里混用
width: 100%和flex: 1，它们冲突；改用flex: 1 1 0更可控
加了min-width: 0还是溢出？检查截断三件套是否齐备
min-width: 0 只是“解锁”了收缩能力，它不会自动让文字变省略号。要真正截断，必须同时满足三个条件：
-
white-space: nowrap（单行）或overflow-wrap: break-word（多行换行） -
overflow: hidden（否则溢出内容仍可见） -
text-overflow: ellipsis（仅对nowrap生效）
这三者缺一不可。常见错误是只加了 min-width: 0 和 overflow: hidden，结果文字全挤成一行跑出屏幕外。
滚动区域里的 flex 溢出怎么处理？别只靠flex-wrap: nowrap
用 flex 实现横向滚动时，很多人以为加个 flex-wrap: nowrap 就万事大吉。其实它只禁掉折行，不解决子项本身宽度失控的问题。
- 父容器必须设
overflow-x: auto+ 明确宽度（如width: 100%或max-width: 375px） - 每个子项推荐用
flex: 0 0 auto（不放大、不缩小、按内容宽） +min-width: 0 - iOS Safari 卡顿？加
-webkit-overflow-scrolling: touch，但注意它会让position: fixed子元素错位；更稳的做法是禁用它，改用原生滚动 - 左右边缘被切？确认滚动容器用了
box-sizing: border-box，否则 padding 会算进 width 导致实际可用空间不足
嵌套 flex 场景下容易漏掉哪一层？
复杂卡片、表单项、弹出菜单里，溢出往往藏在“缝隙”里：外层 .card → 中间 .row → 内部 .title，只要参与 flex 分配，就可能需要 min-width: 0。
小屏下尤其危险：固定值如 min-width: 200px 在 375px 屏宽上直接撑开；优先用 min-width: 0 + 媒体查询微调，或配合 clamp() 设弹性边界。
最常被忽略的，是那些看起来“只是容器”的中间层——比如一个 display: flex 的图标文字组合，它自己就是 flex 容器，它的子元素又是 flex 项目，两层都得设 min-width: 0 才真正生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
