防止内容扩展网格项

TL;DR:有没有类似的东西table-layout: fixedCSS 网格？

我尝试创建一个年视图日历，其中包含月份的大 4x3 网格，以及用于日期的嵌套 7x6 网格。

日历应填满页面，因此年份网格容器的宽度和高度均为 100%。

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

这是一个工作示例：https://codepen.io/loilo/full/ryXLpO/ https://codepen.io/loilo/full/ryXLpO/

为简单起见，该笔中的每个月有 31 天，从星期一开始。

我还选择了一个小得离谱的字体来演示这个问题：

网格项目（=日单元格）非常紧凑，因为页面上有数百个网格项目。一旦日期数字标签变得太大（请随意使用左上角的按钮调整笔中的字体大小），网格的尺寸就会增大并超过页面的主体尺寸。

有什么办法可以防止这种行为吗？

我最初声明我的年份网格的宽度和高度为 100%，因此这可能是开始的点，但我找不到任何适合该需求的与网格相关的 CSS 属性。

免责声明：我知道有很简单的方法可以设置日历的样式，而无需使用 CSS 网格布局。然而，这个问题更多的是关于该主题的一般知识，而不是解决具体的例子。

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

网格项目的初始大小为min-width: auto and min-height: auto.

您可以通过将网格项设置为来覆盖此行为min-width: 0, min-height: 0 or overflow具有除visible.

从规格来看：

6.6.自动最小网格尺寸 项目 https://www.w3.org/TR/css3-grid-layout/#min-size-auto

为了给网格项提供更合理的默认最小尺寸，本规范定义了auto的价值min-width / min-height还将指定轴上的自动最小尺寸应用于其网格项overflow is visible。 （效果类似于对弹性项目施加的自动最小尺寸。）

这是涵盖弹性项目的更详细说明，但它也适用于网格项目：

• 为什么弹性项目不会缩小到超过内容大小？ https://stackoverflow.com/q/36247140/3597276

这篇文章还涵盖了潜在的问题嵌套容器并已知主要浏览器之间的渲染差异.

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

.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 演示 https://jsfiddle.net/gthxnsbd/

1fr vs minmax(0, 1fr)

上述解决方案在网格项级别运行。对于容器级解决方案，请参阅这篇文章：

• 为什么 minmax(0, 1fr) 对于长元素有效，而 1fr 则无效？ https://stackoverflow.com/questions/52861086/why-does-minmax0-1fr-work-for-long-elements-while-1fr-doesnt