Как исправить соотношение сторон элементов в гибком контейнере равным 1, когда для гибкого направления установлено значе ⇐ CSS

[Anonymous]

У меня есть несколько элементов в гибком контейнере (в этом примере — 3, но я бы хотел, чтобы он работал с любым их количеством). На широких экранах они располагаются в ряд, на узких — в столбец. Каждый элемент содержит svg. Я хотел бы, чтобы содержимое SVG имело соотношение сторон 1. Мой код хорошо работает на широких экранах, но плохо на узких. На узких экранах элементы больше не ограничены по высоте гибким контейнером, если для соотношения сторон установлено значение 1. Я весьма озадачен таким поведением и хотел бы понять, почему. Кроме того, мне было бы любопытно узнать, как сделать так, чтобы в контейнере содержалось три вертикальных элемента div, в то время как каждый svg внутри них имел соотношение сторон 1.

Вот простой пример моего кода:

.контейнер-тест{ высота: 30вх; дисплей: гибкий; гибкое направление: строка; } .col-test{ гибкий: 1; максимальная высота: 100%;} .wrapper{ положение: родственник; дисплей: блок; максимальная высота: 100%; максимальная ширина: 100%; соотношение сторон: 1; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); } .граф{ дисплей: блок; высота: 100%; ширина: 100%; } @media (максимальная ширина: 576 пикселей) { .контейнер-тест{ гибкое направление: столбец; } } Я могу заставить это работать, если жестко запрограммирую высоту .col-test (например, установив ее на 33%). Однако мне хотелось бы иметь более аккуратное решение, которое можно было бы легко использовать повторно для любого количества элементов.