Hallo MB,

sieht so aus als gänge das nicht.

Grund ist, dass die Flexbox noch keine definitive Höhe hat, wenn die Größe des ::after bestimmt wird.

Wenn Du die Höhe der Flexbox explizit festlegst, dann geht es.

Höhen bestimmen sich entweder von außen nach innen (das äußere Element bekommt eine feste Höhe und die inneren berechnen ihre Höhe basierend darauf) oder von innen nach außen (das innere Element bekommt eine feste Höhe und die drumherum haben eine auto-Höhe und legen sich mit Padding, Border und Margin drumherum). Was Du bräuchtest, wäre eine Kombination: die Flexbox bestimmt ihre Höhe an Hand des Inhalts (von innen nach außen) und das ::after-Element orientiert sich an der Flexbox (von außen nach innen).

Soweit ich weiß, tun die Browser das nicht, weil das zu Endlosschleifen im Layout führen kann.

Ein align-self:stretch auf dem ::after hilft auch nicht, weil der stretch nachträglich passiert und sich die Breite dann nicht mehr anpasst, trotz aspect-ratio.

Ich würde sagen: Size-Observer und JavaScript.

Rolf