必须显式设置min-width: 0于Flex直接子元素，否则默认min-width: auto会锁死宽度，导致overflow-wrap等换行规则无法触发；还需配合max-width约束和overflow-wrap: break-word生效。
min-width: 0 必须加在直接子元素上，不是父容器
移动端 Flex 子项撑破容器，90% 是因为浏览器默认给它加了 min-width: auto——它把一长串 URL、base64 或连续英文当不可分割整体，宁可拉宽整个父容器，也不缩自己。这个行为不会报错，但你在 DevTools 的 Computed 面板里能看到 min-width 被解析成几百像素，而不是 0px。
必须显式写 min-width: 0，且只对 display: flex 容器的**直接子元素**生效：
- ✅ 正确：
.card > .title { min-width: 0; } - ❌ 无效：
.card { min-width: 0; }（父容器设了没用） - ⚠️ 嵌套时也要加：
.card > .content { min-width: 0; }，如果.content内部又用了display: flex，那它的子项还得再加一遍 - 别写
min-width: 0px或min-width: 0%，旧版 Safari（≤15.6）可能不认，只用min-width: 0
overflow-wrap: break-word 单独写没用，得配三件套
overflow-wrap: break-word 不是“自动换行开关”，它只在内容**超出可用空间后**才触发断行。而 min-width: auto 已经把空间撑开了，它根本没机会运行。
要让换行真正生效，这三者必须同时作用于同一个元素：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0（解锁收缩能力） -
max-width: 100%或明确宽度（比如flex: 1 1 0，第三个参数是像素值，起点为 0） -
overflow-wrap: break-word（主逻辑） +word-break: break-all（兜底，防无断点字符串）
注意：word-break: break-word 已废弃，别用；移动端建议双写兼容：word-wrap: break-word + overflow-wrap: break-word。
父容器漏了 width/max-width，所有规则都白配
Flex 子项再怎么设 min-width: 0 和 overflow-wrap，只要父容器没明确宽度约束，就没有“溢出”可言——浏览器认为空间无限，自然不触发任何裁剪或换行。
常见漏点：
- 用
width: 100vw做全屏容器 + padding → 在 iOS Safari 中会因滚动条宽度计算偏差而溢出，改用width: 100%+ 父级控制 content width - Flex 容器本身没设
max-width: 100%，导致子项撑开后横向滚动条出现 - 表格中未配
table-layout: fixed和列宽（如td { width: 200px; }），overflow-wrap直接被忽略 - 卡片类组件（如 Ant Design 的
Card）内部未重置min-width，需手动覆盖
图片、input、textarea 这些元素不走 flex 换行逻辑
overflow-wrap 和 word-break 对 <img>、<input>、<textarea>、<pre> 基本无效——它们有独立渲染规则。
对应处理方式：
-
<img>：必须加max-width: 100%+height: auto，否则原始尺寸直接撑破 -
<input type="text">：无法自动换行，只能靠width+overflow: hidden截断，或换用<textarea> -
<textarea>：默认支持换行，但需加resize: none防拖拽，并用max-width约束 -
<pre>和<code>：默认white-space: pre，需手动设white-space: pre-wrap+overflow-wrap: break-word
最常被忽略的是那些“看起来只是容器”的中间层——比如卡片里的 .row、表单项里的 .field-group，只要它参与了 flex 分配，就可能需要 min-width: 0。小屏下尤其危险，固定值如 min-width: 200px 在 375px 屏宽上直接失效，优先用 min-width: 0 + 媒体查询微调。
