Prevent content from expanding a grid item

Question

In Firefox, when an element is positioned and sized using CSS Grid columns, and another, wider, element is added inside the first element, the width of the first element increases to hold the wider descendant.

Does anyone know how to stop this behaviour and just have the descendant element overflow the parent/ancestor's box as expected, (and as it does in Chrome)?

For example:

.grid-layout {
  display:grid;
  grid-template-columns: repeat( 12, 1fr );
  grid-gap: 3vw;
  
  background-color: rgba( 255, 255, 100, 1);
  border-bottom: 5px solid #000;
  padding-bottom: 1em;
}

.grid-layout header, 
.grid-layout main {
  grid-column:3 / span 8;
}

header {
  background:#eee;
}

main {
  background: #aae;
}

pre {
  background-color: #eaa;
}

   <section class="grid-layout">
    <header><h1>CSS Grid Items Expanding Strangely</h1>
      <p>In the section fo the document with a Yellow background, (the top half), we're using a Grid layout. The darker box below should be the same width as this box, but it's not, because it expands as the <code>&lt;pre&gt;</code> element inside it gets longer.</p>
    </header>
    
    <main>
      <p>I'm the block of content. Sometimes I'm really long, especially if I have some <code>&lt;pre&gt;</code> elements with long lines. I should be the same width as the grey box above me, but I have expanded t accomodate the width of the <code>&lt;pre&gt;</code> block that I contain.</p>
      
      <pre>This box is a <code>&lt;pre&gt;</code> element. It's super-long. Really long. Let's just write & write & write. Let's just write & write & write. Let's just write & write & write. Let's just write & write & write.</pre>
      
    </main>
    </section>
    

Here's a CodePen with the above example, and a similar repeated section that doesn't use Grid layout: https://codepen.io/johnbeales/pen/JrKbQW

Setting overflow:hidden on the containing block, (the <main> tag in the above example), fixes the problem, (the <pre> tags get cut off, everything else wraps), but I want to be able to move some child elements out of the box so that's not an option.