How to ensure a 1 column grid does not bleed out of the viewport without writing hacky CSS?

Question

(Simplified scenario) Under a certain breakpoint, I want my CSS grid to contain only 1 column and be as wide as the viewport, but not wider (i.e. no horizontal scrolling on the grid):

Here are the relevant HTML and CSS codes respectively (live code here):

Code

html,
body {
  margin: 0;
  padding: 0;
}

.grid {
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: minmax(1px, 1fr);
}

header {
  background: hsl(209, 36%, 90%);
  padding: 10px;
}

main {
  background: hsl(209, 36%, 80%);
  padding: 10px;
}

footer {
  background: hsl(209, 36%, 70%);
  padding: 10px;
}

pre {
  border: 1px solid black;
  padding: 10px;
  overflow-x: auto;
}

<div class="grid">
  <header>
    <div>(Column 1)</div>
    <a href="/">Home</a>
  </header>
  <main>
    <article>
      (Column 2)
      <h1>Test</h1>
      <h2 id="overview">Overview</h2>
      <p>Lorem ipsum.</p>
      <div>
        <div>
          <pre><code>Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
    Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
    Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
    </code></pre>
        </div>
      </div>
      <h2 id="conclusion">Conclusion</h2>
      <p>Lorem ipsum.</p>
    </article>
  </main>
  <footer>
    <div>(Column 3)</div>
    <a href="/">Home</a>
  </footer>
</div>

As you can see, the second column (which in this case is rendered as the second row), contains a <pre> block that has some lengthy lines of text.

In order to prevent this <pre> block to expand its column (e.g. the <main> element) beyond the viewport and cause a horizontal scrollbar on the entire page, I had to define grid-template-columns like this:

grid-template-columns: minmax(1px, 1fr);

Had I instead have used:

grid-template-columns: 1fr;

The <main> element would have stretched wide enough to contain the entire lines of text inside the <pre> block.

Is there any way, other than grid-template-columns: minmax(1px, 1fr);, which I discovered just by experimenting and trail and error, to ensure the grid's maximum width does not exceed the device/browser width?

---

(More complex scenario) In a more complex scenario, the grid (in another breakpoint), will have 3 columns, but with gaps in between:

.grid {
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2em;
}

Unfortunately this won't work as expected as the second column will stretch out to be as wide as each line of code inside the <pre> block (live code here):

html,
body {
  margin: 0;
  padding: 0;
}

.grid {
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 50px;
}

header {
  background: hsl(209, 36%, 90%);
  padding: 10px;
}

main {
  background: hsl(209, 36%, 80%);
  padding: 10px;
}

footer {
  background: hsl(209, 36%, 70%);
  padding: 10px;
}

pre {
  border: 1px solid black;
  padding: 10px;
  overflow-x: auto;
}

<div class="grid">
  <header>
    <div>(Column 1)</div>
    <a href="/">Home</a>
  </header>
  <main>
    <article>
      (Column 2)
      <h1>Test</h1>
      <h2 id="overview">Overview</h2>
      <p>Lorem ipsum.</p>
      <div>
        <div>
          <pre><code>Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
    Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
    Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
    </code></pre>
        </div>
      </div>
      <h2 id="conclusion">Conclusion</h2>
      <p>Lorem ipsum.</p>
    </article>
  </main>
  <footer>
    <div>(Column 3)</div>
    <a href="/">Home</a>
  </footer>
</div>

In this scenario, 100vw or 100% won't work, as the grid gaps are added on top so the final width will exceed 100vw or 100%.