css - 为什么 minmax(0, 1fr) 对长元素有效而 1fr 却不行？

Question

所以我有这个网格:

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

Answer 1

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

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

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

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

更多详情:

• Reconsider the meaning of 1fr
• Prevent grid area from expanding causing whole page to scroll