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_B 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

34 Answered Questions

[SOLVED] How to center absolutely positioned element in div?

19 Answered Questions

[SOLVED] How do CSS triangles work?

39 Answered Questions

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

  • 2011-02-22 12:41:14
  • ┼áime Vidas
  • 262110 View
  • 1021 Score
  • 39 Answer
  • Tags:   html css

16 Answered Questions

0 Answered Questions

How to set max fr per row

  • 2019-05-30 12:02:02
  • Mattia
  • 25 View
  • 0 Score
  • 0 Answer
  • Tags:   html css css-grid

1 Answered Questions

2 Answered Questions

Can CSS grid-columns respect the min-width of an item spanning multiple columns?

  • 2018-05-10 14:24:53
  • stephband
  • 311 View
  • 2 Score
  • 2 Answer
  • Tags:   css css-grid

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
  • 346 View
  • 0 Score
  • 1 Answer
  • Tags:   html css css-grid

1 Answered Questions

[SOLVED] CSS Grid - Understanding the Grid for Text

  • 2017-07-17 16:07:29
  • Doe. J
  • 90 View
  • 1 Score
  • 1 Answer
  • Tags:   css grid

Sponsored Content