Flex子元素内的<pre>不换行是因其默认white-space: pre禁用自动断行，与Flex无关；需显式设white-space: pre-wrap、word-break: break-all、max-width: 100%及父项min-width: 0和flex-shrink: 1。
Flex子元素内的<pre>或<code>不换行，根本不是Flex的问题，而是<pre>默认行为锁死了文本流——它天生拒绝折行，且Flex容器不会强制覆盖这个特性。
为什么<pre>在Flex里照样不折行
<pre>元素默认有white-space: pre，浏览器会严格保留空格和换行，并禁用自动断行。即使把它放进display: flex容器、设了flex-wrap: wrap，这个内联级行为也不会被Flex主轴逻辑接管——Flex只管“如何排列子项”，不管“子项内部怎么渲染文本”。
- 它不是Flex子项的尺寸问题，而是
<pre>自身语义决定的：设计初衷就是显示原始格式化内容（比如日志、代码片段） - 加
overflow-wrap: break-word对<pre>无效，因为white-space: pre优先级更高 - 设
min-width: 0也没用——那只是解决Flex项收缩问题，不改变<pre>内部的排版规则
让<pre>内容真正换行的实操写法
必须显式覆盖<pre>的默认white-space，并配合断行控制：
- 用
white-space: pre-wrap：保留原有换行和空格，但允许浏览器在必要时折行 - 加
word-break: break-all或overflow-wrap: break-word处理长无空格串（如base64、URL） - 确保父级Flex子项本身可缩：
min-width: 0+flex-shrink: 1，否则<pre>会被撑得溢出 - 别忘了
max-width: 100%，防止<pre>无视容器边界
示例CSS：
立即学习“前端免费学习笔记（深入）”；
.code-block {
white-space: pre-wrap;
word-break: break-all;
max-width: 100%;
}
.item {
min-width: 0;
flex-shrink: 1;
}
用<code>替代<pre>时的常见陷阱
<code>是行内容器，默认没有white-space限制，但它也不自动换行——因为它的父元素（比如<p>或Flex子项）可能设了white-space: nowrap，或者没给足够宽度约束。
- 检查直接父元素是否意外继承了
white-space: nowrap（常见于按钮、标签类组件） -
<code>内含长token时，仅靠overflow-wrap: break-word不够，必须同时设min-width: 0在它的父Flex子项上 - 避免对
<code>设display: block后忘记配width或max-width，否则它会按内容无限撑宽
移动端Safari中特别容易失效的点
iOS Safari（尤其15–16）对white-space: pre-wrap + flex-wrap: wrap组合计算不准，常表现为最后一行文字突然右移、高度塌陷或断行位置偏移。
- 临时修复：给
<pre>加overflow: hidden或transform: translateZ(0)触发GPU加速重绘 - 更稳方案：改用
<div contenteditable="false">模拟<pre>，手动控制white-space和overflow - 动态插入后若出现错位，读一次
offsetHeight强制同步布局
真正卡住的从来不是flex-wrap写没写，而是把<pre>当成普通块级元素去调Flex参数——它需要的是文本层干预，不是布局层调整。
