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

[Rolf B]

Hallo MB,

das mit dem ResizeObserver ist auch nicht so einfach. Dadurch, dass Du eine baseline-Ausrichtung möchtest, darfst Du dem Rechteck nicht die Höhe der Flexbox geben.

Ist die Flexbox bspw. 20 Pixel hoch, liegt die Baseline irgendwo bei 17px. Wo genau, liegt am Font. Nehmen wir mal an, es wären 17. Dann hat das ::after unter sich 3px frische Pixel-Luft, d.h. wenn Du es nun 20px hoch machst, braucht die Flexbox 23px. Was einen Resize auslöst, der das ::after 23px hoch macht. Was einen Resize auslöst, der... und so weiter.

Und da man an ::after-Elemente auch nicht rankommt (weil es die pseudo()-Methode, die in der Spec schon steht, noch nicht gibt), kannst Du auch nicht die echte Position des Elements abfragen und so die Differenz zwischen Bottom und Baseline bestimmen. Dafür brauchst Du ein Dummy-div, das in der Flexbox versteckt ist. Meine Versuche sind allerdings noch nicht wirklich erfolgreich und ich muss mich jetzt um andere Dinge kümmern.

Rolf