What is the point of fr units in CSS Grid if the content inside the item can expand it beyond its allotment

Question

div with item 2 here will expand the row height to be greater than 1fr:

<div class="container">
  <div>1</div>
  <div>2 what happens to me when i'm too big? It's not fair to others</div>
  <div>3</div>
  <div>4</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 200px;
  height: 100px;
  outline: 1px solid red;
}
.container > * { outline: 1px solid green;}

score 0 · Answer 1 · answered Dec 05 '19 at 16:15

I did assume, wrongly, that it would behave somewhat like 50%, but as it turns out, the fr doesn't really apply if the content has exceeded the width. In that case, the width becomes the content-width and the other item (defined by 1fr) gets what's leftover in space.

What is the point of fr units in CSS Grid if the content inside the item can expand it beyond its allotment

1 Answers1