提问者:小点点

为什么minmax(0,1fr)对长元素起作用而1fr不起作用?


所以我有了这个网格:

+---------+------------------------------+---------+    
|  <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?

码本


共1个答案

匿名用户

因为1fr默认情况下等同于minmax(auto,1fr)

当您使用minmax(0,1fr)时,这与独立的1fr是不同的。

在第一种情况下,轨道不能小于网格项的大小(最小大小为auto)。

在第二种情况下,磁道可以自由调整大小为0宽/高。

更多详情:

  • 重新考虑1fr
  • 的含义
  • 防止网格区域扩展导致整个页面滚动