css - Why does minmax(0, 1fr) work for long elements while 1fr doesn't?

Question

So I have this grid:

+---------+------------------------------+---------+    
|  <div>  |  <p> - 1000 characters long  |  <div>  |
+---------+------------------------------+---------+

Inside p there's super long string with no spaces. divs are placeholders with fixed dimensions. This produces the above:

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;

But changing minmax(0, 1fr) to 1fr gives this:

+---------+----------------------------------------+    
|  <div>  |               <p> - 1000 characters long  |  <div>  |
+---------+----------------------------------------+

It overflows out of its parent and way out of screen size. Why isn't it behaving like minmax?

Codepen

Answer 1

Because 1fr is equivalent to minmax(auto, 1fr), by default.

When you use minmax(0, 1fr), that's something different than standalone 1fr.

In the first case, the track cannot be smaller than the size of the grid item (min size is auto).

In the second case, the track is free to resize to a 0 width/height.

More details:

• Reconsider the meaning of 1fr
• Prevent grid area from expanding causing whole page to scroll