I have this very simple flexbox layout with some text and a background image element beside it. The background image element to the right needs to automatically keep the same height as the text element as well as an aspect ratio of 1/1, like so:
Expected:
But the aspect ratio property is ignored. The height of the #image element is set to the height of the flexbox like I want it (since the flexbox by default sets align-items: stretch). But the width stays at 0, despite the aspect ratio property, which should set the width to the same as the height.
Interestingly, if the flexbox is set to flex-direction: column it does work as expected.
Why isn't aspect ratio correctly applied in a row flexbox and how do I fix it?
#wrapper { display: flex;}#image { background-image: linear-gradient(red, gray); border: 1px solid black; aspect-ratio: 1 / 1;}<div id="wrapper"><div id="text"><h3>A headline</h3> And some text below it<br> Element to the right should be a square</div><div id="image"></div></div>