<分区>
似乎 pre 标签在 block 布局和 flex 布局元素中表现不同:
<div>
<pre style="background-color: green;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
</div>
<div style="display: flex;">
<pre style="background-color: blue;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
</div>
第一个 pre(标有绿色背景)根据父级 div 的宽度(页面宽度)正确调整大小。但是放置在 flex 容器内的第二个 pre 似乎具有最大宽度并且产生超出页面宽度。只有当 pre 有长词时才会发生这种情况。有什么方法可以正确限制第二个 pre 的宽度，而无需像明确指定它或通过 overflow:hidden 删除超出的文本这样的黑客攻击？我试过 white-space: pre-wrap; 但它没有任何区别:(
