CSS Grid Pre Horizontal Scroll

Question

I want to have a <pre> code block in a grid layout.

This should be responsive. When the space is to small, it should be able to scroll horizontal.

What I did

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
      }
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}

<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>

What it looks like:

Picture: What it looks like

What I want

It should be responsive and should be inside of the grid-area: a.

Picture: What I want

Solution

Setting the min-width of the main element to 0 should be sufficient, see below:

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
        min-width: 0;
}
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}

<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>