防止内容扩展网格项

默认情况下，网格项不能小于其内容的大小。

网格项的初始大小为 和 。min-width: automin-height: auto

您可以通过将网格项设置为 或设置为 以外的任何值来覆盖此行为。min-width: 0min-height: 0overflowvisible

从规格：

6.6. 网格的自动最小大小 项目

为了给网格项提供更合理的默认最小大小，本规范定义了 / 的值，同时将指定轴中的自动最小大小应用于 .（效果类似于对柔性项目施加的自动最小尺寸。automin-widthmin-heightoverflowvisible

以下是涵盖 flex 项的更详细说明，但它也适用于网格项：

• 为什么 flex 项目不会缩小到超过内容大小？

这篇文章还介绍了嵌套容器的潜在问题以及主要浏览器之间已知的渲染差异。

---

若要修复布局，请对代码进行以下调整：

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* NEW */
  min-width: 0;      /* NEW; needed for Firefox */
}

jsFiddle 演示

---

1fr与minmax(0, 1fr)

上述解决方案在网格项级别运行。有关容器级解决方案，请参阅以下帖子：

• 为什么 minmax（0， 1fr） 适用于长元素，而 1fr 则不然？

前面的答案很好，但我也想提一下，网格有一个固定的布局等效物，你只需要写而不是作为你的轨道大小。minmax(0, 1fr)1fr

现有的答案可以解决大多数情况。但是，我遇到了一个情况，我需要网格单元格的内容是 。我通过绝对定位在包装器中解决了它（不理想，但我知道的最好的），如下所示：overflow: visible

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv