我试图创建一个文档页面，它不会超出屏幕的大小。下面的例子可以工作，但是一旦我添加了一个包含大量文本的<pre><code>块，这些文本就不会被换行，并导致水平滚动条变得可见。
我试图通过将overflow-x: auto添加到<code>元素来解决这个问题，这部分工作，但现在当页面调整大小时，文本不再缩小，仍然会导致移动的设备上的滚动条。

checkbox.addEventListener("change", () => {
  code.style.display = checkbox.checked ? "" : "none";
});

.resize-wrapper {
  resize: horizontal;
  border: 1px solid black;
  overflow-x: auto;
}

.page {
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

main {
  max-width: 600px;
}

code {
  display: block;
  overflow-x: auto;
}

<div class="resize-wrapper">
  <div class="page">
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <label><input id="checkbox" type="checkbox" />show code block</label>
      <pre id="code" style="display: none">
        <code>
          // Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </code>
      </pre>
    </main>
  </div>
</div>

在上面的例子中，.resize-wrapper表示完整的viewport，我只是添加它，以便更容易在Stack Overflow上尝试。
有没有一种方法可以告诉<pre><code>节不要超过其父节的大小？