In columns sized only with 'fr' unit, overflow: auto (or scroll) is ignored in grandchild elements

[tomhumiston]

When an item of overly-wide content with overflow: auto or overflow: scroll is a descendant — but not a direct child — of a grid container, and the relevant column is defined solely in terms of the fr unit, the item will fail to conform to its parent's width.

Workarounds include:

• Add a non-fr unit (even if uselessly small) as part of the template-column-width declaration. For example, change grid-template-columns: 1fr to grid-template-columns: minmax(1px 1fr).
• Put display: grid on the immediate parent of the item. (Not appropriate for every circumstance.)

Here's a demo / reduced test case. First the HTML:

<!-- The divs below are identical except for class and h2: -->


<div class=foo>
<article>
<h2>This article's parent div has '1fr' column</h2>
<p>Right end of &lt;pre&gt; should not be visible before side-scrolling:</p>
<pre><span class=good>Start</span> . . . . . . . . . . . . . <span class=bad>End</span></pre>
</article>
</div>


<div class=bar>
<article>
<h2>This article's parent div has 'minmax(1px, 1fr)' column</h2>
<p>Right end of &lt;pre&gt; should not be visible before side-scrolling:</p>
<pre><span class=good>Start</span> . . . . . . . . . . . . . <span class=bad>End</span></pre>
</article>
</div>

Now the CSS:

/* ----- the basic case (and its workaround) ----- */

.foo {
    display: grid;
    grid-template-columns: 1fr;
}

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

pre {
    overflow: auto;
}

body {
    max-width: 20em;
}


/* ---------- pretty stuff ---------- */

body {
    margin: 5vw auto 10vw;
    width: 90%;
    font-family: Verdana, sans-serif;
}

.foo,
.bar {
    margin: 3vw 0;
    padding: 1em;
    background-color: silver;
    border-radius: .2em;
}

article {
    background-color: white;
    border: 1px solid black;
}

article > * {
    margin: 1rem;
    font-size: medium;
}

pre {
    padding: 1em;
    background-color: #eee;
    font: medium Menlo, 'Lucida Console', monospace;
}

.good {
    color: limegreen;
}

.bad {
    color: red;
}

(If you omit the pretty stuff, you might need to narrow the body even more to cause overflow on the <pre> element and thus observe the bug in action.)