Overflow-y: auto; failed to achieve the desired scrolling effect

my parent container sets height: 100%; overflow-y: auto; , but the scroll bar of body cannot scroll when
.main "s height is a fixed value, it works
but the percentage doesn"t work
similarly, I use 1fr of gird , and it doesn"t work either.

Sep.07,2021

.main doesn't work when the height is 100%!


html , body all need to set height:100%

<style>
html,body{
    height:100%;
    margin:0;
}
.con{
    height:100%;
    overflow:auto;
}
</style>

<div class="con">
    

... ... ...

</div>
< hr >

if the answer is useful to you, please like it and adopt it. Thank you ^

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3af05-2c24d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3af05-2c24d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?