Éléments de grille qui limitent l'expansion du contenu

Question

TL;DR: Existe-t-il une propriété similaire à table-layout: fixed

J'essaie de créer un calendrier annuel avec une grande grille 4x3 pour les mois et une grille 7x6 imbriquée à l'intérieur pour les dates.

Le calendrier doit remplir la page entière, de sorte que la largeur et la hauteur du conteneur de grille annuelle soient définies sur 100 %.

.year-grid {
  largeur : 100 % ;
  hauteur : 100 % ;

  affichage : grille ;
  modèle de grille : répéter (3, 1fr) / répéter (4, 1fr);
}

.mois-grille {
  affichage : grille ;
  modèle de grille : répéter (6, 1fr) / répéter (7, 1fr);
}
Voici un exemple fonctionnel : https://codepen.io/loilo/full/ryXLpO/
Par souci de simplicité, chaque mois dans cet exemple compte 31 jours et commence le lundi. 
J'ai également choisi une taille de police très petite pour illustrer le problème : 
Les éléments de la grille (c'est-à-dire les cellules de date) sont très compacts puisqu'il y a des centaines de cellules de date sur la page. Et une fois que les étiquettes de date deviennent trop grandes (n'hésitez pas à utiliser les boutons dans le coin supérieur gauche pour ajuster la taille de la police dans l'exemple), la grille s'agrandit et dépasse les limites de la page. 
Existe-t-il un moyen d’empêcher ce comportement ? 
J'ai initialement défini la largeur et la hauteur de la grille annuelle à 100 %, ce qui pourrait être le point de départ, mais je ne trouve aucune propriété CSS liée à la grille pour satisfaire ce besoin. 
Avertissement : Je sais qu'il existe des moyens simples de styliser ce calendrier sans utiliser la disposition en grille CSS. Cependant, cette question porte davantage sur la connaissance générale du sujet plutôt que sur des exemples spécifiques. 
            

Answer 1

Les réponses précédentes sont très bonnes, mais je voulais aussi mentionner qu'il existe une manière équivalente de corriger la disposition des grilles, il vous suffit de mettre en majuscule vos pistes comme minmax(0, 1fr)而不是1fr.

Answer 2

Par défaut, la taille d'un élément de grille ne peut pas être inférieure à la taille de son contenu.

La taille initiale des éléments de la grille est de min-width: auto和min-height: auto.

Vous pouvez remplacer ce comportement en définissant l'élément de grille sur n'importe quelle valeur autre que min-width: 0，min-height: 0或overflow（除visible).

De spécification :

Voici une explication plus détaillée couvrant les éléments flexibles, mais s'applique également aux éléments de grille :

• Pourquoi les éléments flexibles ne peuvent-ils pas être réduits en dessous de la taille du contenu ?

Cet article couvre également les problèmes potentiels liés aux conteneurs imbriqués et les différences de rendu connues entre les principaux navigateurs.

---

Pour corriger votre mise en page, apportez les ajustements suivants à votre code :

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

Démo jsFiddle

---

1fr与minmax(0, 1fr)

La solution ci-dessus fonctionne au niveau des éléments de la grille. Pour les solutions au niveau du conteneur, consultez l'article suivant :

• Pourquoi pour les éléments longs, minmax(0, 1fr) est valide mais 1fr n'est pas valide ?