必须给 flex 直接子项加 min-width: 0，否则换行、截断、隐藏类 css 失效；因其默认 min-width: auto 强制撑开内容，使 overflow-wrap 等无法触发，且该行为仅作用于直接子元素，旧版 safari 需显式声明。
必须给 flex 直接子项加 min-width: 0，否则所有换行、截断、隐藏类 CSS 都不会生效——不是写错了，是浏览器压根没走到那一步。
为什么 overflow-wrap: break-word 加了也没用
Flex 子项默认有 min-width: auto（等价于 min-width: fit-content），它强制子项至少撑开到能放下整串无空格内容（比如 URL、base64、哈希值），哪怕父容器只有 200px 宽。这时 overflow-wrap 根本不触发，因为“溢出”还没发生——宽度早被撑开了。
-
min-width: auto是隐式行为，DevTools 的「Computed」里看不到，但真实起作用 - 只对
display: flex的**直接子元素**生效，套一层<div> 就失效 <li>旧版 Safari（≤15.6）对 <code>flex: 1隐含的min-width: 0支持不稳定，必须显式写 - 给子项加
min-width: 0（破除默认最小宽度限制） - 确保父容器有明确宽度约束（比如
width: 300px或max-width: 100%） - 按需组合文本控制属性：
– 单行省略：white-space: nowrap+overflow: hidden+text-overflow: ellipsis
– 长文本换行：overflow-wrap: break-word+word-break: break-all（后者兜底）
– 中文/混排正文：word-break: break-word（注意不是break-all） - 嵌套 flex 场景要逐层设：
.item是 flex 容器，里面文字块也用了display: flex，那文字块本身也得加min-width: 0 - 别依赖
flex: 1自带的收缩能力；它在长单词场景下可能压缩空白而非截断文本，导致overflow: hidden形同虚设 - 移动端尤其注意 Safari 兼容性：显式
min-width: 0+overflow-wrap: break-word+word-break: break-all是最稳组合
怎么写才真正生效：三要素缺一不可
单行省略、换行、隐藏，都得靠这三步协同：
flex-shrink: 0 和嵌套 flex 的坑
如果子项写了 flex-shrink: 0，min-width: 0 会被忽略——它拒绝任何收缩，直接顶破容器边界。
最容易被忽略的不是写哪几行 CSS，而是 flex 容器自身的高度来源是否稳定——比如父级用了 height: 100%，但祖先节点没设高度，整个链路就断了，min-width: 0 再准也没用。
