flex-wrap: wrap未生效主因是父容器缺宽度约束且子项min-width: auto阻止收缩；需设具体width/max-width并给子项加min-width: 0。
flex-wrap: wrap写了但没生效，先看父容器有没有宽度约束
flex-wrap: wrap不是“写了就换行”，它只在空间不足时触发。如果父容器宽度无限（比如直接子元素、width: auto、没设max-width），浏览器永远算不出“放不下”，自然不换行。
常见漏点：body或main没设width/max-width；用了100vw却忽略垂直滚动条占位（实际可用宽度变小）；父级是<form></form>或<table>等 display 行为特殊的元素，隐式覆盖了 flex 布局。
<ul>
<li>用开发者工具检查 computed styles，确认父容器的 <code>width 和 max-width 是具体数值，不是 auto
outline: 1px solid red 看哪一层真正超宽子项死活不肯缩，min-width: auto 是元凶
Flex 子项默认 min-width: auto，意思是“宁可撑爆容器，也不能比内容窄”。哪怕你写了 flex: 1 或 flex: 0 1 auto，遇到 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 这种长串，它也拒绝收缩。
必须显式给该子项加 min-width: 0，才能让它真正响应 flex-shrink。注意：这个样式要加在“直接包裹内容”的元素上，不是最外层 flex 容器，也不是深层嵌套的文本节点。
立即学习“前端免费学习笔记（深入）”；
- 如果子项是
<div><p>长文本</p></div>，min-width: 0要加在<div> 上 <li>图片、iframe 等替换元素不走 flex-shrink 逻辑，得额外加 <code>max-width: 100%和height: auto - 别在已设
flex-shrink: 0的子项上再加min-width: 0，两者冲突可能导致尺寸异常 - 别对整个 flex 容器写
word-break: break-all，影响范围太大 -
white-space: nowrap会彻底禁用换行，和flex-wrap: wrap冲突，慎用 - 移动端 Safari 对
overflow-x: auto默认不显示滚动条，惯性滚动也常失效，这不是 CSS 错误，是 WebKit 策略
overflow-wrap: break-word 失效，是因为浏览器根本不认那是“词”
overflow-wrap: break-word 只在整词放不下时才断，但 helloWorld1234567890 这类驼峰或 Base64 字符串，浏览器不视为“单词”，所以不触发断行。
这时候得用 word-break: break-all 强制切——但它会破坏中文阅读（如把“数据库”切成“数据 库”）。所以只加在明确含长英文的 class 上，比如 .log-id、.token-field，并搭配 min-width: 0 和父容器宽度限制。
嵌套太深时，CSS 已经救不了，得靠 JS 插零宽空格
像 <pre class='brush:php;toolbar:false;'>{ "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." }</pre> 这种场景，长 base64 值被包裹在多层 inline 元素里，CSS 换行规则完全失效。
此时只能在 JS 层提前插入零宽空格（\u200b），给浏览器留出合法断点：
str.replace(/([a-zA-Z0-9]{30})/g, '$1\u200b')
这个正则每 30 个字母数字插一个断点，既不影响复制粘贴，又能让浏览器正常折行。注意不要插得太密（如每 10 个），否则影响可读性；也不要插得太少（如每 100 个），起不到作用。
真正麻烦的从来不是属性写没写全，而是 min-width: auto 和缺失宽度约束这两点同时存在——它们一前一后，把换行逻辑彻底堵死。
