Сделайте ширину дочернего элемента равной высоте родительского элемента только с помощью CSS ⇐ CSS

[Anonymous]

Как описано изображение состоит из двух элементов: родительского (темно-серого) и дочернего (не такого темно-серого). Ширина и высота родительского элемента являются гибкими. Соотношение дочернего элемента i 1:1 или y:y, где y равен высоте родительского элемента.

Я пытался найти способы решить эту проблему, используя flex, Calc, Padding и т. д., но достигли конца пути. Мы будем очень признательны за любые идеи, как решить эту проблему с помощью чистого CSS.

РЕДАКТИРОВАТЬ: теперь я понимаю, что мне следовало добавить более подробную информацию об использовании этого сценария. А также то, что я считаю динамической высотой. Для меня динамическая высота предполагает, что высота определяется количеством содержащегося в ней контента. Поэтому я добавил немного HTML, чтобы уточнить. Раздел .content может оказаться ненужным, если вы можете поместить содержимое непосредственно в элемент div .container. Но это зависит от того, как вы пишете CSS:



Here is some text. It can be long and it can be short.
It will affect the height of the .container thus also
the height and width of the .square.

1:1



Подробнее здесь: https://stackoverflow.com/questions/408 ... h-css-only