By seeker_of_bacon


2018-10-17 18:06:11 8 Comments

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

1 comments

@Michael Benjamin 2018-10-17 18:36:19

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:

Related Questions

Sponsored Content

35 Answered Questions

[SOLVED] How can I center an absolutely positioned element in a div?

20 Answered Questions

[SOLVED] How do CSS triangles work?

40 Answered Questions

[SOLVED] How do I remove the space between inline/inline-block elements?

  • 2011-02-22 12:41:14
  • ┼áime Vidas
  • 299792 View
  • 1096 Score
  • 40 Answer
  • Tags:   html css

16 Answered Questions

2 Answered Questions

1 Answered Questions

[SOLVED] How do I equally space out css grid columns?

  • 2019-06-26 17:13:34
  • Sarthak Sachdeva
  • 116 View
  • 0 Score
  • 1 Answer
  • Tags:   html css

1 Answered Questions

Why is my div changing height w/media queries?

1 Answered Questions

[SOLVED] CSS Grid auto-fit + minmax adds phantom row

  • 2017-11-20 19:07:25
  • PorcupineRending
  • 428 View
  • 0 Score
  • 1 Answer
  • Tags:   html css css-grid

Sponsored Content