Как применять аспект-ритио на изгиб Inside Flexbox с динамической высотой ⇐ Html

[Anonymous]

Минимальный воспроизводимый < /p>


#tag-wrapper {
display: flex;
align-items: stretch;
background-color: rgb(159, 159, 206);
}

#icon-wrapper {
align-self: stretch;
}

#icon {
background-color: rgb(211, 158, 44);
aspect-ratio: 1/1;
height: 100%;
}< /code>





Tag content dynamic
< /code>
< /div>
< /div>
< /p>
Я пытаюсь создать элемент пользовательского интерфейса «тег» со значком и некоторым текстом. Я хочу, чтобы фон значка имел другой цвет. Чтобы достичь этого желаемого пользовательского интерфейса, мне нужен фон значков, чтобы быть полной высотой контейнера Flexbox (который сам по себе имеет динамическую высоту на основе другого его контента) и поддерживать соотношение сторон 1/1. Я достиг получения фона значков, чтобы иметь правильное соотношение сторон на основе динамической высоты, но родительский элемент для значка не получает ширину, поэтому теперь элементы в Flexbox перекрываются. Этот родительский элемент - это то, что заставляет соотношение сторон работать. Как я могу решить это? Это действительно необходимо с 2025?>

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