必须显式设min-width: 0，因Flex子项默认min-width: auto（等价于内容最小宽度），会阻止收缩和换行；该声明仅对直接子元素生效，且需配合overflow-wrap: break-word或text-overflow: ellipsis等规则才起效。
Flex子项加min-width: 0是前提
不加这句，后面所有换行或截断规则基本无效。浏览器对 Flex 直接子项默认设了min-width: auto，意思是“至少得显示完整单词”，哪怕父容器只有 200px 宽，它也拒绝压缩——结果就是长英文（如eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9）把整个容器顶宽，旁边按钮、图标全被挤跑。
min-width: 0必须写在目标文本元素上（比如.title或.log-id），写在父容器（如.list-item）上完全没用。它不是“最小宽度为 0”，而是告诉 Flex 布局：“允许我缩到比内容还小”，从而让flex-shrink真正起作用。
-
min-width: 0px或min-width: 0%在旧版 Safari 或 Firefox 中可能不生效，只认min-width: 0（无单位） - 嵌套 Flex 场景（比如头像 + 文字块再包一层 Flex），内层文字块也要单独加
min-width: 0，不会继承 - DevTools 里检查 computed 样式，如果
min-width仍是auto，说明 selector 写错了或没命中
overflow-wrap: break-word和word-break: break-all怎么选
纯英文长串、Base64、哈希值这类无空格字符串，overflow-wrap: break-word有时仍不触发——它优先尝试按/、.、-等自然分隔符换行，失败才硬切；而word-break: break-all是粗暴兜底：只要放不下就立刻断，不讲语义。
真正稳妥的做法是组合使用：
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word保日常体验（标题、链接、用户输入） -
word-break: break-all兜底长技术字符串（日志 ID、token、API 路径） - 两者同时存在时，Chrome 以
word-break为准，Firefox 表现更一致
注意：word-break: break-all别全局设，尤其别用在中文正文里——它会把“数据库”错切成“数据”+“库”，只加在明确含长英文的 class 上（如.token、.url-path）。
必须配max-width或明确宽度约束
光写overflow-wrap: break-word没用。如果父容器本身没宽度限制（比如display: inline-block且未设宽，或 Flex 项没设flex-basis），浏览器会先无限撑宽容器，再考虑换行——结果还是溢出。
- 推荐用
max-width: 100%而不是width: 100%，更适应响应式 - Flex 项建议用
flex: 1 1 0（flex-basis: 0px），强制从零开始分配空间，配合min-width: 0后宽度才真正可控 -
flex: 1等价于flex: 1 1 0%，其中0%需依赖父宽计算，而 Flex 布局中父宽可能尚未确定，容易卡住
遇到white-space: nowrap或pre标签要特别小心
这两个值会直接禁用所有换行逻辑，哪怕你写了overflow-wrap也静默失效。常见于代码块、URL 显示、状态标签等场景。
- 确认目标元素没被
white-space: nowrap、white-space: pre或<pre class="brush:php;toolbar:false;"></pre>标签覆盖 - 若必须保留
white-space: nowrap（比如单行省略），那就不能指望换行，得改用text-overflow: ellipsis三件套：white-space: nowrap+overflow: hidden+text-overflow: ellipsis，且三者必须同置在同一块级元素上 - 留意 Unicode 窄空格（ ）或零宽空格（），它们也会阻断
overflow-wrap的触发，必要时用 JS 清洗
height: 100%但祖先没设高度，整个链路就失效了。 
