html - 如果元素内的内容可以将其扩展到超出其分配范围，那么CSS网格中fr单位的意义是什么

This question already has an answer here:

How come minmax(0, 1fr) works for long elements while 1fr doesn't?
                                
                                    （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;}

最佳答案

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

关于html - 如果元素内的内容可以将其扩展到超出其分配范围，那么CSS网格中fr单位的意义是什么，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59198700/