Wie findet man die Höhe eines Textes im Flex-Kontainer nur mit CSS zur Ausrichtung heraus?

[Rolf B]

Hallo MB,

dieses Snippet tut - wie gesagt - das Gegenteil von deiner ursprünglichen Formulierung: Die Höhe der Flexbox passt sich an die Höhe des Quadrats an, und nicht das Quadrat an die Höhe der Flexbox.

1em ist auch zu viel. Mach das Ganze mal größer (font-size 400%), dann siehst Du das. Was Du bräuchtest, ist die Einheit cap (Höhe der Großbuchstaben im Font), aber die kennt nur der Firefox.

Eine saubere Lösung, die fontunabhängig die korrekte Texthöhe UND den Abstand Baseline zu Text-Bottom berücksichtigt, braucht JavaScript. Wobei auch die an die Buchstabenhöhe nicht herankommt. Das TextMetrics-Objekt aus dem Canvas-API könnte genug Informationen hergeben. Aber das lass ich jetzt liegen.

Rolf