Maintain aspect ratio of a div with dynamic height - html

Question

I wanted to create a square div by pure CSS what it's height is dynamic and it's width will scale base on height.
As we can see in the snipet below, the container height is dynamic base on its content.
The red square take full height of the container and the width should be equal height.
I know we can maintain aspect ratio of a div base on its width but i can not find a way when the height is dynamic.
Any help would be appreciated! Thanks so much!
Note that: The height is dynamic so the solution with vh did not work and the snipet is just a playground.
#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 /*Hmm its just a dummy value*/
}
<div id="container">
<div class="content">
I'm a dynamic content
</div>
<div class="square"></div>
</div>

Answer 1

Here is one other solution:
We can make an inner div inside the main .square div inherits its parent height.
Then, if we rotate that inner div, its height now becomes its width. So all we've got to do at this point, is to hide the overflow from the parent div, and apply some translation so it ends at the correct position.
#container {
width: 400px;
padding: 20px;
border: solid 1px black;
position: relative;
}
.square {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
}
.square>div {
background-color: red;
transform: rotate(-90deg) translate(100%, 0%);
width: 100vw;
height: 100%;
transform-origin: 100% 100%;
}
<div id="container">
<div class="content">
<textarea> I'm a dynamic content</textarea>
</div>
<div class="square">
<div></div>
</div>
</div>

Answer 2

Here you go.
Note that I added contenteditable to the content div, so that you can type in the snippet to add lines of text to see the effect. Of course this isn't necessary in your version.
#container {
width: 400px;
padding: 20px;
border: solid 1px black;
position: relative;
}
.square {
position: absolute; z-index:-1;
left:0;
top: 0;
right: 0;
bottom: 0;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAANSURBVBhXY/jPwPAfAAUAAf+mXJtdAAAAAElFTkSuQmCC');
background-size:contain; background-position:100% 0;
background-repeat:no-repeat;
}
<div id="container">
<div class="content" contenteditable="true">
I'm a dynamic content
</div>
<div class="square"></div>
</div>
The trick is that the background is now a red square (it's a 1×1 image) which is sized with contain. This is not possible with background-color I'm afraid.