Аспект-ритио не влияет на родительский размер на iOS/webkit ⇐ CSS

[Anonymous]

Я применяю свойство CSS-аспекта для детей контейнера. Дети имеют соответствующий размер. Тем не менее, родитель детей не имеет размера, чтобы соответствовать своему контенту. На Chrome это работает, как и ожидалось. Я создал пример
chrome Result:

webkit result:
< /p>
Обратите внимание на то, как в хроме размеры контейнера (синий) для соответствия содержанию (фиолетовый), как и ожидалось. < /p>
Однако, В Webkit контейнер не подходит для его контента. Предположительно, потому что содержание имеет размеры с аспектом ratio. class = "Snippet">

*,
*::after,
*::before {
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
}

.wrapper {
width: 100%;
height: 100%;
display: flex;
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 3px;
background: lightskyblue;
padding: 20px;
}

.child {
display: flex;
justify-content: center;
align-content: center;
position: relative;

height: 50%;
aspect-ratio: 1/1;

background: purple;
border: 2px solid;
border-radius: 2px;
}

.other {
background: orangered;
flex-grow: 1;
}< /code>






< /code>
< /div>
< /div>
< /p>
Но почему это происходит? И как я могу обойти это?


Подробнее здесь: https://stackoverflow.com/questions/794 ... ios-webkit