加min-width: 0是解决flex子项撑开的关键前提，必须作用于flex直接子元素，并配合flex: 1 1 0、overflow: hidden、white-space: nowrap、text-overflow: ellipsis及明确宽度约束才生效。
加 min-width: 0 是最直接有效的解法，但它不是万能开关——必须配齐几个关键条件，否则照样撑破。
为什么 flex 子项写了 overflow: hidden 还是撑开
根本原因不是裁剪失效，而是浏览器默认给 flex 直接子项加了 min-width: auto（等价于 min-width: min-content）。一段无空格的 URL、base64 或哈希串会被当成不可分割整体，flex 布局宁可拉宽父容器，也不压缩子项。
- DevTools 的 Styles 面板里看到
min-width: 0不代表生效——要切到 Computed 面板确认真实值是不是0px -
min-width: 0只对 display: flex 的**直接子元素**起作用，套一层<div>再设就无效 - 如果子项同时设了
flex-shrink: 0，min-width: 0会被忽略，得先删掉它
min-width: 0 必须和哪些样式一起用
它只是打开收缩能力的“钥匙”，真正触发截断或换行还得靠组合规则：
-
flex: 1 1 0比flex: 1更可靠：前者让初始宽度为 0，后者仍按内容宽度起步，容易被长文本卡住 -
overflow: hidden必须加在发生溢出的容器上（通常是子项自身，或其父容器），加错层级等于没加 - 需要省略号时，
text-overflow: ellipsis只对块级元素生效，所以得配合display: block或inline-block - 需要换行时，
overflow-wrap: break-word主逻辑 +word-break: break-all兜底，但前提是子项已能收缩（即min-width: 0已生效）
表单控件（如 <input>）为啥特别容易漏掉
input 是替换元素，默认 min-width: min-content，且盒模型是 content-box，双重阻力导致它比普通 div 更难压住：
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
box-sizing: border-box和min-width: 0——只写一个没用 - 如果父容器是 flex，建议直接写
flex: 1 1 0，比width: 100%更稳 -
textarea同理，还要额外加display: block，否则底部基线间隙会引发意外滚动条 - 图片、iframe 等替换元素也得补
max-width: 100%和height: auto，否则 flex 不会自动缩放它们
最容易被忽略的是：父容器本身没设明确宽度约束。flex 容器若没 width、max-width 或弹性基础尺寸（如 flex-basis），它会按内容自适应，根本不存在“溢出”一说——这时所有子项上的修复都白忙。
