为什么 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?

Codepen

20806 次浏览

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

当您使用 minmax(0, 1fr)时,它不同于独立的 1fr

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

在第二种情况下,轨道可以自由地调整到0的宽度/高度。

更多细节: