为什么对于长元素来说minmax（0，1fr）起作用而1fr则不起作用？

Question

为什么对于长元素来说minmax（0，1fr）起作用而1fr则不起作用？

105

所以我有这个网格：

+---------+------------------------------+---------+    
|  <div>  |  <p> - 1000 characters long  |  <div>  |
+---------+------------------------------+---------+

在p标签内，有一个没有空格的超长字符串。div是具有固定尺寸的占位符。

这会生成以上内容。

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;

但是将 minmax(0, 1fr) 更改为 1fr 将会得到这个结果：

+---------+----------------------------------------+    
|  <div>  |               <p> - 1000 characters long  |  <div>  |
+---------+----------------------------------------+

它溢出了它的父元素并且远超屏幕尺寸。为什么它没有像minmax一样表现？ Codepen

- seeker_of_bacon

你能编辑一下你的第二个 ASCII 艺术图吗？因为 + 和 | 没有对齐，所以不清楚单元格的边缘在哪里。 - mikemaccana

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

1fr默认等同于minmax(auto, 1fr)。

而当你使用minmax(0, 1fr)时，它与单独使用1fr是不同的。

在第一种情况下，轨道的大小不能小于网格项的大小（最小大小为auto）。

而在第二种情况下，轨道可以自由调整为0宽度/高度。

更多细节：