防止内容扩展网格项目

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

网格项目的初始大小为

min-width: auto

min-height: auto

你可以通过设置网格项目覆盖这种行为

min-width: 0

min-height: 0

overflow

visible

从规格：

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

为网格项目，该规范定义了提供更合理的默认最小大小

auto

的值

min-width

/

min-height

在指定的轴的自动最小尺寸也适用于它的网格项目

overflow

是

visible

。（效果类似于对d性物品施加的自动最小尺寸。）

这是有关d性项目的更详细说明，但它也适用于网格项目：

• 为什么d性项目不能缩小到超过内容大小？

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

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

.month-grid {  display: grid;  grid-template: repeat(6, 1fr) / repeat(7, 1fr);  background: #fff;  grid-gap: 2px;  min-height: 0;    min-width: 0;   }.day-item {  padding: 10px;  background: #DFE7E7;  overflow: hidden;    min-width: 0;      }