如何限制“flex”容器内的“pre”标签宽度？

Question

如果放置在块布局和flex布局项目中，pre标记似乎有不同的行为：

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

第一个pre（标有绿色背景）的大小正确为父div的宽度（页面宽度）。但放在pre容器内的第二个flex似乎具有最大宽度并产生超出页面宽度的内容。仅当pre有长词时才会发生这种情况。我有什么办法可以正确地限制第二个pre的宽度，而不是明确指定它或通过overflow: hidden删除超出文本的黑客？我试过white-space: pre-wrap;，但没有任何区别：（

Answer 1

似乎有一个着名的min-width: 0问题。 Flexbox为auto引入了新的min-width值，这些值可以做很多奇怪的事情。将0元素设置为pre会使其宽度符合预期。