In the grid-area main, I have a scrollable div that needs to occupy all the available space, all together filling up to the device heigh. Now, with max-height it is not able to occupy up to the available space.
<div style="display: grid; grid-template-areas: 'header' 'main' 'footer';
grid-auto-rows: auto 1fr auto;
grid-template-columns: 100%;
height: 100vh;
text-align: center;
margin: -18px -24px 0px -24px; border: 0px; padding:0px ">
<div style="grid-area: header; background-color: green; margin: 0px; border: 0px; padding: 0px">
<br />
</div>
<div style="grid-area: main; background-color: blue; ">
<!-- This needs to occupy the rest of the space, now limited by max-height -->
<div style="height: 100%; overflow-y: scroll; padding: 20px; min-height:15px; max-height:265px">
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
Scrollable Content that needs to be occupying the available space
</div>
</div>
<div style="color: black; background-color: black; grid-area: footer; padding: 10px; text-align: center">
some footer content
</div>
</div>