如果项目内的内容可以将其扩展到超出其分配范围，则CSS网格中fr单位的意义是什么？

Question

此问题已经在这里有了答案：

How come minmax(0, 1fr) works for long elements while 1fr doesn't?

（1个答案）

已关闭

1分钟前

。

此处带有项目2的div会将行高扩展到大于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;}

这里有项目2的div会将行高扩展到大于1fr：
 
1 
2当我太大时我会发生什么？ ...
] >>

Answer 1

我确实错误地认为它的行为将类似于50％，但事实证明，如果内容超出宽度，fr并不会真正适用。在这种情况下，宽度变为内容宽度，而另一项（由1fr定义）获得剩余的空间。