了解CSS网格中的溢出 / minmax行为

Question

tldr：嵌套网格溢流的codepen列：重复（16，minmax（0,1fr））;

---

因此，我有一个元素容器，带有两个主要元素，summary-wrapper和<代码> stats-wrapper

容器具有以下网格：

.container {
    display: grid;
    grid-template-columns: repeat(16, 1fr);

    column-gap: 4rem;
    row-gap: 4rem;
    padding: 5rem;
    width: 100%;
}

summary-wrapper放置在grid> grid-column：1/11; （第96行）和 stats-wrapper at 网格列：11/17;（第25行）

在我心中，将统计数据的网格列更改为网格 - 列表：12/17应该只移动元素的开始，它在chrome中进行：

chrome（无溢出）：

但是在firefox中：

现在，浏览器之间的行为不同似乎有些怪异，但并没有真正改变我对网格容器的工作方式的心理模型只是……错误 - 而且我经历过（并且在我的项目中经历）这种行为在Chrome中，这并不是我问题的重点。

我以前有这个问题，但是有输入，并且被定向到这个答案这允许更长的元素使用<<<代码>网格 - 板块列：重复（16，minmax（0,1fr））;

这似乎适用于STATS元素（如果您查找标题，则不再溢出页面）。但是，由于该元素的内容（不包括标头）也是嵌套网格的一部分，所以我遇到了同样的问题，但是它并未使用网格 - 板块 - 列来固定：重复（16，Minmax（Minmax（0,1fr）） ）;（第50行）这次：

我觉得很奇怪，因为我看不出任何原因（无论哪种情况）需要溢出。甚至使用minmax（0,1fr）的修复程序也依赖于说明

1fr等效于MinMax（Auto，1FR）

，并且auto阻止轨道小于项目。但是在这种情况下（afaik）项目stats__section-查看 stats__section-sate-section-applications and stats__section-stats__section-trend ，除了他们的文字，

我只是很困惑！

codepen

任何帮助！

Answer 1

溢出的原因是嵌套网格.stats__content中的列隙规则。

.stats__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  column-gap: 4rem; <----- CULPRIT
  row-gap: 3rem;
  background-color: white;
  padding: 2rem 0.1rem 0.1rem 0.1rem;
}

由于它是一个固定的宽度，重复15次（因为缝隙仅在轨道之间，而不在轨道和容器边缘之间），在这种情况下，溢出是不可避免的。

(4rem) * (15 gaps) = 60rem of inflexible width

减少间隙的数量或找到其他解决项目的解决方案。