防止内容展开网格项

Question

防止内容展开网格项有什么像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..(其效果类似于对FLEX项目施加的自动最小大小。)

这里有一个更详细的解释，介绍了Flx项，但它也适用于网格项：

• 为什么不缩小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 */}

订正码

---

1frVSminmax(0, 1fr)

上面的解决方案在网格项级别运行。有关容器级别的解决方案，请参见下面的文章：

• 为什么minmax(0，1FR)对长元素有效，而1FR不工作？