Как сделать так, чтобы при сжатии блока высота уменьшалась пропорционально ширине флекс элемента?

Question

[Andrew]

Подскажите, пожалуйста, как сделать, чтоб при сжатии блока уменьшалась не только ширина, но и высота флекс элемента?
т.е., например, есть квадратный элемент, и если уменьшилась ширина на 10рх, то и высота.

Answer 1

[Роман Дворянов]

Квадратный блок на CSS можно достичь несколькими хаками, самый, как мне кажется простой - это сделать паддинг в 100% по высоте у псевдоэлемента. Есть еще вариант с подкладкой квадратного элемента свг и растягиванием по ширине контейнера, а контент делать абсолютным по отношению к родителю с свг, но псевдоэлемент проще

.elem {
  ...
  position: relative;
}

.elem::before {
  content: '';
  display: block; 
  height: 100%;
  padding-top: 100%;
}

Ну и реализация с свг и картинкой https://codepen.io/irodger/pen/ZydPoZ (изменяйте экран кодпена, чтоб убедиться в адаптивности квадрата)