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

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

使用1fr时，与独立auto有所不同。

在第一种情况下，轨道不能小于网格项目的大小（ min 大小为{{1}}）。

在第二种情况下，可以随意将轨道的大小调整为0的宽度/高度。

更多详细信息：

minmax（0，1fr）如何适用于长元素，而1fr不适用？

1 个答案: