Rasterelemente, die die Inhaltserweiterung einschränken

Question

DR: Gibt es eine ähnliche Eigenschaft wie table-layout: Fixed

---

Ich versuche, einen Jahreskalender mit einem großen 4x3-Raster für die Monate und einem darin verschachtelten 7x6-Raster für die Daten zu erstellen.

Der Kalender sollte die gesamte Seite ausfüllen, daher sind Breite und Höhe des Jahresrastercontainers auf 100 % eingestellt.

.year-grid {
  Breite: 100 %;
  Höhe: 100 %;

  Anzeige: Raster;
  Rastervorlage: wiederholen (3, 1fr) / wiederholen (4, 1fr);
}

.month-grid {
  Anzeige: Raster;
  Rastervorlage: wiederholen (6, 1fr) / wiederholen (7, 1fr);
}

Hier ist ein funktionierendes Beispiel: https://codepen.io/loilo/full/ryXLpO/

Der Einfachheit halber hat in diesem Beispiel jeder Monat 31 Tage und beginnt am Montag.

Ich habe auch eine sehr kleine Schriftgröße gewählt, um das Problem zu veranschaulichen:

Die Rasterelemente (d. h. Datumszellen) sind sehr kompakt, da es Hunderte von Datumszellen auf der Seite gibt. Und sobald die Datumsbeschriftungen zu groß werden (im Beispiel können Sie die Schriftgröße auch über die Schaltflächen in der oberen linken Ecke anpassen), wächst das Raster und geht über die Grenzen der Seite hinaus.

Gibt es eine Möglichkeit, dieses Verhalten zu verhindern?

Ich habe die Breite und Höhe des Jahresrasters ursprünglich auf 100 % eingestellt, das wäre also vielleicht der Ausgangspunkt, aber ich kann keine rasterbezogenen CSS-Eigenschaften finden, die diesen Bedarf erfüllen.

Haftungsausschluss: Ich weiß, dass es einfache Möglichkeiten gibt, diesen Kalender zu gestalten, ohne das CSS-Rasterlayout zu verwenden. Allerdings geht es bei dieser Frage eher um allgemeines Wissen über das Thema, als dass konkrete Beispiele angesprochen werden.

Answer 1

之前的答案非常好，但我还想提到，对于网格来说，也有一种固定布局的等效方法，你只需要将你的轨道大小写为minmax(0, 1fr)而不是1fr。

Answer 2

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

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

您可以通过将网格项设置为min-width: 0，min-height: 0或overflow（除visible之外的任何值）来覆盖此行为。

来自规范：

这是一个更详细的解释，涵盖了弹性项，但也适用于网格项：

• 为什么弹性项不能缩小到内容大小以下？

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

---

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

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* 新增 */
  min-width: 0;   /* 新增；Firefox需要 */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* 新增 */
  min-width: 0;      /* 新增；Firefox需要 */
}

jsFiddle演示

---

1fr与minmax(0, 1fr)

上面的解决方案是在网格项级别上操作的。对于容器级别的解决方案，请参阅以下文章：

• 为什么对于长元素，minmax(0, 1fr)有效而1fr无效？