Css 防止内容扩展网格项

TL；DR:是否有类似于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);
}

下面是一个工作示例：

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

我还选择了一个小得可笑的字体来说明这个问题：

网格项（=日单元格）非常精简，因为页面上有数百个。一旦日期标签变得太大（可以使用左上角的按钮随意调整笔中的字体大小），网格的大小就会增加并超过页面的正文大小

有没有办法防止这种行为

我最初宣布我的年网格的宽度和高度为100%，所以这可能是开始的时候，但我找不到任何与网格相关的CSS属性能够满足这一需要

免责声明：我知道有非常简单的方法来设计日历样式，而无需使用CSS网格布局。但是，这个问题更多的是关于该主题的一般知识，而不是解决具体的示例。
默认情况下，网格项不能小于其内容的大小

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

您可以通过将网格项设置为
最小宽度：0
，
最小高度：0
或
溢出
，使用除
可见
以外的任何值来覆盖此行为

根据规范：


要为网格项提供更合理的默认最小大小，请执行以下操作：
规范定义了
最小宽度
/
最小高度
的
自动
值也将指定轴上的自动最小大小应用于
溢出
可见的网格项。（其效果类似于施加在弹性项目上的自动最小尺寸。）

这里有一个更详细的解释，涵盖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 */
}



1fr
vs
minmax（0，1fr）
上述解决方案在网格项级别运行。有关容器级别的解决方案，请参阅本文：



前面的答案很好，但我还想提到网格有一个固定的等价布局，您只需要编写
minmax（0，1fr）
而不是
1fr
作为轨迹大小。
现有答案解决了大多数情况。然而，我遇到了这样一种情况，我需要网格单元格的内容是
溢出：可见的
。我通过在包装器中绝对定位（不理想，但我知道最好的）来解决它，如下所示：


.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);
}

您希望发生什么？每个单元格中的字体可以是任意大小，并且不会导致网格单元格大小增加？确切地说。如果我将网格项的大小设置为百分比值而不是分数，基本上是一种更方便的方法。我基本上在寻找表格布局的网格布局版本：修复（请参见：）这是整个CSS网格规范中最大的痛苦。它们需要一个设置，其中栅格区域不能脱离其父栅格容器的尺寸！事实上，对于嵌套的网格结构来说，这是一场噩梦。这是迷人的，同时也很有趣，我肯定不会仅仅通过尝试就想到这一点。你是不是只是浏览了一下说明书中的信息？因为在不知道该用谷歌搜索什么之后，这就是我以前尝试过的，但我最终阅读了错误的部分（在总结了错误的问题原因之后）。它修复了高度，但在水平方向上继续增长，
minwidth:0没有帮助。我遗漏了什么吗？对于嵌套网格，我们需要将其应用于所有级别。但我真的来这里投票并感谢你们…@PragyAgarwal…-）css规范贡献者应该停止吸毒。为什么不是一个新的关键字？为什么要对已经存在的、甚至毫无意义的财产做出特殊的行为。。。css会成为一个简单直观的一天吗？我推荐这种方法，而不是以前的公认答案。虽然这是可行的，但我一点也不懂。。。你能解释一下为什么会这样吗？minmax（0，1fr）在做什么？这不应该总是0吗？我很困惑：（
minmax（0，1fr）
之所以有效，是因为
1fr
实际上是
minmax（auto，1fr）
的简写，这不是原始问题的正确值。有关更多详细信息，请参阅所有其他答案都是hacks，这应该是公认的答案