.container {
width: 250px;
height: 250px;
resize: both;
overflow: auto;
border: 1px dashed black;
}
.child {
position: relative;
max-width: 300px;
max-height: 150px;
background-color: blue;
color: red;
aspect-ratio: 2 / 1;
}<div class="container">
<div class="child">
<span style="position: absolute; top: 0; right: 0;">right<br>side</span>
<span style="position: absolute; bottom: 0; left: 0;">left<br>side</span>
</div>
</div>
resize on bottom-right cornerEverything works perfectly when I resize on the x-axis (left and right). However, when I try to resize on the y-axis (top and bottom), the blue child element does not scale properly and overflows.
I am looking for a solution to make the resizing on the y-axis behave just like it does on the x-axis. Can anyone help?