How to prevent scrollable elements without word wrap from making the page too wide?

I'm trying to create a documentation page that does not grow beyond the size of the screen. The example below works, but once I add a <pre><code> block with lots of text, this text is not wrapped and causes a horizontal scrollbar to become visible.

I tried to fix this by adding overflow-x: auto to the <code> element, and this partially works, but now the text doesn't shrink anymore when the page is resized, still causing a scrollbar on mobile devices.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

In the example above, .resize-wrapper represents the full viewport, I just added it to make it easier to try out on Stack Overflow.

Is there a way I can tell the <pre><code> section to not grow beyond the size of its parent?

Add white-space: pre-wrap; to your code element css

code {
  display: block;
  overflow-x: auto;
  white-space: pre-wrap;

}