77

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

Jamie Williams
  • 325
  • 2
  • 12
seeker_of_bacon
  • 1,548
  • 1
  • 15
  • 20
  • Could you edit your second ASCII art diagram? it's not clear where the edge of the cell is, since the `+` and the `|` aren't lined up. – mikemaccana May 21 '19 at 16:56

1 Answers1

109

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:

Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644