How can I set scale depends from screen ratio? - html

Question

in this code, the font size increases in proportion to the screen ratio
/*
#mixin fontSuperSize($number){
#media (min-aspect-ratio: 2/1) {
font-size: $number * 2vh;
}
#media (max-aspect-ratio: 2/1) {
font-size: $number * 1vw;
}
}*/
#media (min-aspect-ratio: 2 / 1) {
div {
font-size: 8vh; } }
#media (max-aspect-ratio: 2 / 1) {
div {
font-size: 4vw; } }
<div>1234567890987654321</div>
The length of the child elements is more than 100 vmin in total, and therefore the adjustment comes. I need to reduce the scale of the child elements so that the adjustment does not occur on the square screens.
How can I do the same as for text but for a div. That is what I have now...
How can I make it so that the div does not work out
<div class="main">
<div class="auth"></div>
<div class="table" ></div>
<div class="news" ></div>
</div>
<style>
.main {
width: 100vw;
height: 100vh;
}
.auth {
width: 60vmin;
height: 60vmin;
background: blue;
position: absolute;
left: 2%;
right : 2%;
}
.table {
width: 60vmin;
height: 20vmin;
background: green;
position: absolute;
right: 2%;
top: 2%;
}
.news {
width: 70vmin;
height: 20vmin;
background: gold;
position: absolute;
right: 2.5%;
bottom: 2.5%;
}
</style>