div Element with fixed height and aspect-ratio doesn't have a width inside flexbox on Safari

I have a div element, that acts as image container, with an aspect-ratio and a fixed height. The img itself just aligns to that via object-fit.

The div element is nested within a figure, which itself is nested in a helper, which sits in a flex box.

For some reason the div element does have a computed width of 0 instead of 60 according to the aspect-ratio.

<div class="col col--image"><div class="helper"><figure class="figure"><div class="image"><img          width="60"          height="60"          src="https://via.placeholder.com/60x60.png"        /></div></figure></div></div>

.col {    display: flex;    justify-content: flex-start;    width: 100%;    max-width: 100%;}.helper {    max-width: 100%;    margin-top: 0px;    margin-bottom: 0px;    padding-top: 0px;    padding-bottom: 0px;}.figure {    display: contents;    margin: 0px;}.image {    position: relative;    width: 100%;    height: 60px;    max-width: 100%;    aspect-ratio: 60 / 60;    margin: 0px;}img {    display: block;    width: 100%;    height: 100%;    object-fit: contain;}

I've created a codepen and broken it down to the minimum viable product.

I expect the img being rendered due to the .image having the correct width, also the image should sit on the left, and not centered.

The problem appears in Safari 18 on desktop as well as on mobile.I didn't have the chance to test it on older versions.

I've tested it on other browsers like Chrome, Firefox and Edge, which are rendering it as expected

I need to retain that specific setup with the flexbox on the col class, due to it being part of a greater component, that has various options of aligning columns, stretching/containing the image, etc.

When I open the rendered page in Safari, add either width 100% or flex-grow 1 via the inspecter on the helper class and remove it, it'll stay correctly.If I keep one of these properties, the image will align to the center, so that it isn't an option.