Why does a 1fr CSS grid column neutralize "overflow: scroll" of its child
blocks and why minmax(1px, 1fr) fixes it?

Question

In this HTML structure which is placed inside the <body> element (demo here):

<div class="grid-1">
<header>
  <a href="/">Home</a>
</header>
<main>
  <article>
    <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>
  <a href="/">Home</a>
</footer>

as you can see, the second child element (i.e. the <main> element) has a <pre> block with a few lengthy lines of code.

When this CSS stylesheet is applied to that HTML structure:

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

.grid-1 {
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 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;
}

The second column stretches to contain the entire lines of the <pre> block, making the overflow-x: auto; on the <pre> block to be effectively ignored, and pushes the third column out of the view and to the right:

However, if I change grid-template-columns: 1fr 1fr 1fr; to grid-template-columns: 1fr minmax(1px, 1fr) 1fr;, all three columns are assigned equal widths and the <pre> block's overflow-x: auto; comes into effect.

If I am not mistaken, in this scenario, minmax(1px, 1fr) should resolve to 1fr and make the second grid effectively identical to the first grid. Then why does it change the way the grid is rendered?

As noted in [your other question](https://stackoverflow.com/q/52588429/3597276), the [default minimum size of a grid item](https://stackoverflow.com/q/43311943/3597276) is the size of its content (i.e., `min-width: auto` / `min-height: auto`). When you set the *min* value of the `minmax()` function to 1px, you (apparently) override that initial setting. — Michael Benjamin, Oct 01 '18 at 11:17
@Michael_But in that particular case, `minmax(1px, 1fr)`, should resolve to `1fr` (I think), but isn't. Which part of the [spec](https://drafts.csswg.org/css-grid), explains this behavior? And the question this is marked as a duplicate of does not explain this either. So can you explain why you have marked it as a duplicate? — Behrang, Oct 01 '18 at 12:24
I read both your questions. The `min-width: auto` default in both cases explained and resolved the problem. However, I'll look into this further when I'm done at work. What browser(s) are you using? — Michael Benjamin, Oct 01 '18 at 12:27
Also, feel free to re-open if you believe the duplicate is not relevant or useful. — Michael Benjamin, Oct 01 '18 at 12:30
@Michael_B If you don't mind I will reopen this one, because this particular behaviour of `minmax` is not explained in the linked question and, at least the way I interpret it, the spec (and MDN) does not explain this behaviour. — Behrang, Oct 01 '18 at 12:36
Hi @Behrang, I just went through your question again. My original comment and the duplicate I posted are relevant here and do, in fact, apply. The spec language you request can be found in the second link of my original comment. — Michael Benjamin, Oct 01 '18 at 22:34
@Michael_B I don't mind having this closed, but part of the question was related to how _minmax(x, y)_ should be interpreted, which was not discussed in the answers to the other questions. — Behrang, Oct 02 '18 at 10:40
The `minmax()` function is pretty straightforward. What specifically are you trying to understand? I believe I addressed the issue you raised in your question. — Michael Benjamin, Oct 02 '18 at 11:08

score 4 · Accepted Answer · answered Oct 03 '18 at 11:30

This behaviour can be explained by the default min-width of grid columns as well as how browsers interpret the minmax function.

Default `min-width` of grid columns

By default, grid columns have a min-width of auto. As mentioned in Preventing a Grid Blowout, this will cause the column to be "indefinitely sized", which means its content can influence its width and expand it.

This behaviour can be overriden by setting the min-width of the column to something other than auto, such as 0px, 1px, or anything else that makes sense.

How `minmax(1px, 1fr)` and `minmax(auto, 1fr)` is interpreted by browsers

According to MDN's reference page for minmax:

A function taking two parameters, min and max.

Each parameter can be a <length>, a <percentage>, a <flex> value, or one of the keyword values max-content, min-content, or auto.

If max < min, then max is ignored and minmax(min,max) is treated as min. As a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum.

However it doesn't explain if minmax, when applied to a grid column, changes the behaviour of width, or min-width and max-width properties?

It turns out minmax, at least in this case, is interpreted in a way similar to:

min-width: 1px;
max-width: 1fr;

Similarly, minmax(auto, 1fr) would be interpreted similar to:

min-width: auto;
max-width: 1fr;

But as explained earlier, depending on the content of the column, min-width: auto; would allow the browser to expand the width of the column even beyond 1fr -- a potential point of confusion.

Why does a 1fr CSS grid column neutralize "overflow: scroll" of its child blocks and why minmax(1px, 1fr) fixes it?

1 Answers1

Default min-width of grid columns

How minmax(1px, 1fr) and minmax(auto, 1fr) is interpreted by browsers

Why does a 1fr CSS grid column neutralize "overflow: scroll" of its child
blocks and why minmax(1px, 1fr) fixes it?

Default `min-width` of grid columns

How `minmax(1px, 1fr)` and `minmax(auto, 1fr)` is interpreted by browsers