Html 如何限制'；前'；标签内宽"；flex"；集装箱？

如果将

pre

标记放置在块布局和柔性布局项中，则其行为似乎有所不同：

  <div>
    <pre style="background-color: green;">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </pre>
  </div>
  <div style="display: flex;">
    <pre style="background-color: blue;">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </pre>
  </div>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

第一个

pre

（用绿色背景标记）根据父

div

的宽度（页面宽度）正确调整大小。但放置在

flex

容器中的第二个

pre

似乎具有最大宽度，并且生成的页面超出了页面宽度。只有当

pre

有长单词时才会发生这种情况。我有什么方法可以正确地限制second

pre

的宽度，而不需要明确指定它或通过

overflow:hidden

剪切超出范围的文本？我尝试了

空白：预包装但没有任何区别：(

试试空白：nowrap；文本溢出：省略号；溢出：隐藏；
似乎是一个著名的
min-width:0
问题。Flexbox为
min-width
引入了新的
auto
值，可以做很多奇怪的事情。将
pre
元素的
0
设置为
会使其宽度达到预期值。
溢出：hidden
可以工作，但是在仍然能够显示所有文本的情况下是否可以限制宽度？我想显示代码示例，隐藏溢出会有点过分。我发现flex容器的每个子容器都需要
min width:0
，一直到
pre
标记