flex-shrink: 0 拦不住溢出是因为它仅阻止收缩计算，不约束内容原始宽度；需配合 min-width: 0 解除隐式最小宽度限制，并确保父容器有明确 width/max-width 及 overflow-x: auto。
flex-shrink: 0 为什么拦不住溢出
因为 flex-shrink: 0 只管“不参与收缩计算”，不管“内容本身有多宽”。它阻止的是 flex 算法对尺寸的扣减，但不约束子元素的原始宽度来源——比如一段没换行的长 URL、一张未限制尺寸的图片、或一个 white-space: nowrap 的文本块。这些内容天然撑开自身，而 flex-shrink: 0 反而让它们“理直气壮”地伸出去。
真正卡住溢出的，是 min-width: auto 这个隐式默认值
Flex 子项默认有 min-width: auto（不是 0），浏览器据此给它设了个“最小内容宽度”下限：图片按原始尺寸、文字按最长单词或整行字符串。这个隐式限制比 flex-shrink 更底层，且无法被 CSS 覆盖——除非你显式写 min-width: 0。
-
min-width: 0不是让你“缩到 0”，而是解除那个隐式底线，把宽度控制权交还给width、max-width或文本换行规则 - 只写
min-width: 0不够：若内容是长单词，还得配overflow-wrap: break-word或word-break: break-all - 若用了
white-space: nowrap，min-width: 0会失效——此时必须删掉nowrap，或改用text-overflow: ellipsis+overflow: hidden
检查 computed 样式时，重点看这三个值
打开 DevTools 的 Computed 面板，直接查这三项：
-
flex-shrink：确认是0，且没被父级或工具类覆盖 -
min-width：必须是0px或你设的具体值，不能是auto -
flex-basis：如果是auto，说明它仍试图按内容定宽；想彻底交由父容器分配，应设为0px（如flex: 1 0 0）
别忽略父容器的 width 和 overflow 设置
flex-shrink: 0 在没有宽度约束的父容器里毫无意义。比如父容器是 display: flex 且没设 width、max-width 或 flex-basis，它会无限撑开，根本不会触发“溢出隐藏”逻辑。
立即学习“前端免费学习笔记（深入）”；
- 加
overflow-x: auto前，先确保父容器有明确宽度（width: 100%、max-width: 400px等） -
overflow: hidden对父容器无效，除非它同时有width+flex-wrap: nowrap - Safari 旧版本（≤14.1）对
min-width: 0+inline-block组合支持异常，可临时改用flex-shrink: 0+overflow: hidden强制裁剪
min-width: 0 当成可选配置——它和 flex-shrink: 0 是绑定动作，少一个，溢出就照常发生。 
