I was intrigued by the idea of creating a square div using only CSS, where its height adjusts dynamically and its width scales based on that height.
In the snippet below, you can see that the container's height adapts based on its content. The red square within the container should take up the entire height and have a width equal to that height.
While I know how to maintain aspect ratio of a div based on its width, I couldn't find a solution for dynamic height scenarios.
Any assistance on this matter would be greatly appreciated! Thank you so much!
Please note: Since the height is dynamic, solutions involving 'vh' did not work, and the snippet provided is just for experimentation.
#container {
width: 400px;
padding: 20px;
border: solid 1px black;
position: relative;
}
.square {
position: absolute;
top: 0;
right: 0;
bottom: 0;
background-color: red;
width: 100px /*This is just a placeholder value*/
}<div id="container">
<div class="content">
This is a dynamic content
</div>
<div class="square"></div>
</div>