CSS-Grid-Template-Zeilen „Min-Content“ funktionieren nicht ⇐ CSS

[Anonymous]

Die Geige zeigt, dass sie nicht funktioniert (getestet in Chrome und Firefox): https://jsfiddle.net/Flyout/8gsx36qc/4/

Code: Select all

  display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content;
grid-template-areas:
'a b'
'c b';
border: 1px solid black;
">


Catering

Morning
Lunch
Snack
Dinner

Total : 0.00 €

Während es in https://www.cssgridplayground.com/ gut funktioniert:


Zur Verdeutlichung: Die Zelle „Catering“ sollte nicht 50 % der verfügbaren Höhe einnehmen, aber zu ihrem Inhalt passen. Folglich sollte die Zelle „Total“ den größten Teil der Höhe einnehmen.