Grid: Verteilung von Freiraum ganz nach unten.

[Rolf B]

Hallo Weiße Ziege,

leider hat Gunnar die Frage "wieso funktioniert min-content nicht" offen gelassen und nur "Mach's einfach anders" gesagt.

Das Problem ist tatsächlich nicht min-content, sondern der Umstand, dass Du für die zweite Zeile max-content gesetzt hast. Dadurch entsteht eine "wasch mich, aber mach mich nicht nass" Situation, denn die maximale Inhaltshöhe für #d ist die Höhe eines einzeiligen p Elements.

Die minimale Inhaltshöhe für #c sind zwei einzeilige p Elemente. In Summe reicht das nicht, um die Höhe von #b zu erreichen, d.h. eine von beiden Höhenanforderungen für Spalte 2 muss verletzt werden, wenn Spalte 1 ins Grid passen soll.

Eine variable Höhe ist auch gar nicht so einfach zu erreichen. Mit normalem westlich gesetzten Text eigentlich gar nicht, denn dessen Höhe wird vom Inhalt und der Breite festgelegt. Ich habe mal mit writing-mode: vertical-lr; für den #c Bereich experimentiert, dann haben min-content/max-content einen Effekt.

Welche der beiden Höhenforderungen zu ignorieren ist, definiert die Spec möglicherweise in einem Schwarm von drölf und mehr irrsinnig abstrakten Regularien; das tu ich mir jetzt nicht an. Möglicherweise überlässt sie es sogar dem User Agent (a.k.a. Browser), was er damit tun soll.

Gunnars Angabe "auto 1fr" bewirkt jedenfalls, dass für Zeile 1 die maximale Inhaltshöhe gesetzt wird (ja, auto heißt maximal. Aber das ist für Dich egal, denn wegen der Textrichtung ist minimal=maximal) und Zeile 2 den kompletten Rest füllt (die Summe aller fr-Angaben beträgt 1, d.h. die Höhe ist $$\frac{1}{1}=1=100\%$$ des noch nicht verteilten Platzes).

Du kannst auch "min-content 1fr" nehmen. Oder max-content 1fr. In allen 3 Fällen legt #c damit die Höhe der ersten Row fest und die zweite Row passt sich an.

Rolf