css网格使用fr增长超过100%,但不是minmax

Question

.small-container { width: 200px; }
.small-container > div { margin: 16px; }
.border { box-shadow: 0 0 2px 2px black; }

.break-long-text {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.grid-fr {
    display: grid;
    grid-template-columns: 1fr;
}

.grid-minmax {
    display: grid;
    grid-template-columns: minmax(120px, 1fr);
}

<div class="small-container">
  <div class="grid-fr">
    <div class="break-long-text border">
      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
    </div>
  </div>
  <div class="grid-minmax">
    <div class="break-long-text border">
      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
    </div>
  </div>
</div>

两个网格完全相同,唯一的区别是grid-template-columns价值.但是,一个网格尊重其父(200px)的宽度,另一个网格忽略宽度.

1. grid:grid-template-columns: 1fr;=>忽略父宽度并继续,直到内容被填充

2. grid:grid-template-columns: minmax(120px, 1fr);=>仅上升到parent-width(200px)然后变为必要的高度.但是,它仍然大于定义的min-width(120px),这当然是正确的,因为1fr它比120px这个例子大.

因为最后两者应该具有相同的宽度1fr,我想知道不同的结果.这是一个错误还是预期的行为？为什么第二个网格按照我预期的方式工作而不是第一个？

minmax如果我不希望一个单元格大于其父级,我应该总是使用吗？

Answer 1

这是第二个网格的解决方案。

.grid-minmax {
   display: grid;
   grid-template-columns: minmax(120px, 1fr);
 }

这是浏览器计算轨道大小的方法：

(200px container) - (120px nonflexible track size) + (1fr leftover space) = 200px

使用规范中提供的指导（请参见下文），上述行为相对简单明了。

但是，为什么第一个容器中的内容溢出？

这是一个棘手的情况，在这一点上，我可以看到两条可能的答案路径。

1. 之间的工作方式存在问题/问题/错误：

   .break-long-text {
       word-wrap: break-word;
       overflow-wrap: break-word;
    }
   

   和

   grid-template-columns: 1fr;
   

   我之所以这样说，是因为当字符串分解后，问题中的问题就不存在了。换句话说，两个网格容器的行为相同（demo）。

要么

2. 我在规范中找不到答案。我已经审查了以下部分。

   • §7.2.3。弹性长度：fr单位
   • 第11.7条 扩展弹性轨道
   • 第11.7.1节。找到一个的大小fr

下面是如何fr单元的工作原理，详细：

从规格：

§7.2.3。弹性长度：fr单位

柔性长度或单位<flex>尺寸fr，表示网格容器中剩余空间的一部分。

具有fr单位大小的轨道称为弹性轨道，因为它们响应剩余空间而弯曲，类似于弹性项目如何填充弹性容器中的空间。

好的。到目前为止，一切都很好。fr网格布局中的单元的功能类似于flex-grow柔性布局中的单元。

继续规范...

剩余空间的分布发生在所有非灵活的轨道大小调整功能都达到最大值之后。

从可用空间中减去此类行或列的总大小，得到剩余的空间，然后将剩余空间按其伸缩系数成比例地在伸缩大小的行和列之间进行分配。

（强调我的）

换句话说，首先从可用空间（在这种情况下为200像素）中减去所有非柔性轨道尺寸（例如基于像素或em的尺寸）。剩下的任何空间都被认为是剩余空间，然后该空间将成为该fr单元的目标。

另外，“轨道尺寸调整功能”到底是什么？

每个轨道大小调整功能都可以指定为长度，网格容器大小的百分比，对占据列或行的内容的度量或网格中自由空间的一部分。

也可以使用minmax()表示法将其指定为范围，该表示法可以结合任何前面提到的机制来为列或行分别指定最小和最大磁道大小调整功能。

https://www.w3.org/TR/css3-grid-layout/#grid-template-rows-track-sizing-function

这说明了第二个网格容器（带有minmax()）的工作原理，而不是第一个网格容器（带有）的工作原理1fr。

Answer 2

解决方案：

\n\n

设置min-width:0容器.break-long-text就可以了。

\n\n

\r\n

\r\n

.small-container { width: 200px; }\r\n.small-container > div { margin: 16px; }\r\n.border { box-shadow: 0 0 2px 2px black; }\r\n\r\n.min-width-0{\r\n    min-width: 0;\r\n}\r\n.break-long-text {\r\n    width: 100%;\r\n    word-wrap: break-word;\r\n    overflow-wrap: break-word;\r\n}\r\n\r\n.grid-fr {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n}\r\n\r\n.grid-minmax {\r\n    display: grid;\r\n    grid-template-columns: minmax(120px, 1fr);\r\n}

\r\n

<div class="small-container">\r\n  <div class="grid-fr">\r\n    <div class="break-long-text border min-width-0">\r\n      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG\r\n    </div>\r\n  </div>\r\n  <div class="grid-fr">\r\n    <div class="break-long-text border">\r\n      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG\r\n    </div>\r\n  </div>\r\n  <div class="grid-minmax">\r\n    <div class="break-long-text border">\r\n      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG\r\n    </div>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

解释：

\n\n

来自 css 技巧：

\n\n

网格列的最小宽度是自动的。（顺便说一句，对于弹性项目也是如此。）

\n\n

由于 auto 完全基于内容，我们可以说它是 \xe2\x80\x9cindefinitely\xe2\x80\x9d 大小，其尺寸灵活。如果我们要在列上放置一个明确的宽度，例如 50% 或 400px，那么我们会说它的大小是 \xe2\x80\x9cdefinitely\xe2\x80\x9d 。

\n\n

要应用我们的修复，我们需要确保该列具有明确的最小宽度而不是自动宽度。

\n