min-width: 0是解决Flex溢出的首要前提，因其显式覆盖默认min-width: auto，解除内容最小宽度锁定，使flex-shrink、overflow:hidden、text-overflow: ellipsis等规则得以生效；必须作用于flex直接子元素，并与white-space: nowrap、overflow: hidden、display: block及明确宽度约束同级配合。
因为 min-width: 0 显式覆盖了 Flex 直接子项默认的 min-width: auto（等价于 min-width: fit-content），解除了浏览器对“内容最小宽度”的强制保护，让 flex-shrink 和后续裁剪逻辑（如 overflow: hidden、text-overflow: ellipsis）真正有机会生效。
为什么 flex 子项写了 overflow-wrap 还撑破容器
不是属性没起作用，而是浏览器压根没走到换行或裁剪那一步——min-width: auto 让子项先被撑开到最长单词或整段 URL 的自然宽度，父容器宽度被动拉宽，后续所有换行、省略、隐藏规则都因“未溢出”而跳过。
-
min-width: auto是隐式行为，DevTools 的「Computed」里常仍显示为auto，但它真实存在且优先级很高 - 只对
display: flex的**直接子元素**生效；套一层<div> 再设就无效 <li>旧版 Safari（≤15.6）对 <code>flex: 1隐含的min-width: 0支持不稳定，必须显式写 - 如果子项同时设了
flex-shrink: 0，min-width: 0直接被忽略，得先删掉flex-shrink: 0 -
flex: 1 1 0或flex: 1：确保子项参与弹性分配；flex: 1 1 0中的0是像素值，比flex: 1（等价于flex: 1 1 0%）更可控 -
overflow: hidden：必须加在**同一元素上**，否则裁剪不触发；加在父容器 wrapper 层常无效 -
white-space: nowrap+text-overflow: ellipsis：仅当需单行省略时需要；二者必须和min-width: 0同级、同元素，且该元素需为块级（如加display: block） - 父容器要有明确宽度约束：
max-width: 100%、width: 100vw或通过flex上下文推导出可预期宽度 - 子项含
<img alt="CSS中min-width:0为什么能修复移动端溢出" >或<iframe></iframe>：它们有固有尺寸，必须额外加max-width: 100%和height: auto - 子项用了
padding但没设box-sizing: border-box：padding 会叠加在flex-basis之外，悄悄导致总宽超限 - 误设了
min-width: -webkit-fit-content或min-width: fit-content：这些值会覆盖min-width: 0，检查 computed 样式确认 - 嵌套 Flex 场景：外层加了
min-width: 0，但内层文字块仍是display: flex，它也得单独加 -
flex-wrap: nowrap是默认值，也是溢出前提；设成wrap能绕过问题，但布局语义已变
min-width: 0 必须配哪些规则才完整生效
单独加 min-width: 0 只是打开收缩能力的开关，它不自动换行、不自动截断、也不画省略号。真正控制表现的是组合规则：
移动端特别容易踩的坑
不是所有“写了 min-width: 0”就万事大吉，尤其在 iOS Safari 和部分 Android WebView 中，以下问题高频出现：
立即学习“前端免费学习笔记（深入）”；
真正卡住的往往不是 min-width: 0 本身，而是它是否和 overflow: hidden、white-space: nowrap、text-overflow: ellipsis 这四者落在同一元素上，且该元素是否是 Flex 的直接子项、是否有明确宽度上下文——漏掉任意一环，移动端就大概率白屏、横向滚动或文字乱飞。
