从扩大电网项目防止内容(Prevent content from expanding grid it

TL; DR：有什么样table-layout: fixed为CSS网格？

我试图创建一个大的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/

为简单起见，每个月在笔有有31天，并开始在星期一。

我也选择了一个可笑的小字体大小来演示该问题：

网格项目（=天细胞）是相当缩合反应，有数百人在页面上。而且只要一天号标签变得太大（随意玩弄使用左上角的按钮笔的字体大小）电网将只生长在大小和超过页面的车身尺寸。

有什么办法来防止这种行为？

我最初宣布我今年电网将在宽度和高度100％，这样也许开始在点，但我找不到，将已经安装任何需要电网相关的CSS属性。

免责声明：我知道有相当简单的方法来风格，日历只是不使用CSS网格布局。然而，这个问题更多的是在比解决具体的例子主题的一般知识。

Answer 1:

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

网格项目具有的初始尺寸min-width: auto和min-height: auto 。

你可以通过设置网格项目覆盖此行为min-width: 0 ， min-height: 0或overflow比其他任何值visible 。

从规格：

6.6。 网格项目的自动最小尺寸
以提供网格的项目进行更合理的默认最小大小，该规范定义了auto的值min-width / min-height在指定的轴的自动最小尺寸也适用于它的网格项目overflow是visible 。（效果是类似于施加于柔性件的自动最小尺寸。）

这里是覆盖柔性项目更详细的解释，但它适用于电网项目，以及：

不挠的项目为何缩水近内容的大小？

这篇文章还包括与嵌套容器和主流浏览器中已知的呈现差异的潜在问题。

要解决你的布局，进行这些调整你的代码：

.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 */
}

修订codepen