How to properly set an adaptive max-height for CSS Grid

Question

I used the wonderfully simple https://web.dev/one-line-layouts/ for some basic layouts; I love using less CSS for such a powerful, content/view adaptive layout. Everything was going great until I ran into content-heavy "sections" where overflow was set to scroll. I seem unable to find an adaptive max-height that will do what I intend: keep the entire page at 100vh, and allow scrolling for individual sections that have more content than can be displayed in the current view. Every attempt at this, between setting implicit heights for body and #Body as well as max-heights of various values in all tiers of containers still allows the whole page to become larger than the viewport, pushing the footer below it (as shown in the CodePen). The only one to actually limit the height predictably is setting an implicit height on the individual section (like 85vh), but then as the content for the header or footer change, the value will also need to change. Why doesn't max-height 100% do what I think it should do and is there a solution? https://codepen.io/DoctorDIVine/pen/gOgyqmm

body,html{height:100vh;width:100%;margin:0;padding:0;}
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
}
#Body {
    height: 100%; /*This is where 80-95vh would come into play*/
    max-height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    padding: 10px;
}
.section {
    max-height: 100%;
    overflow: scroll;
    border: 1.5px solid;
    border-radius: 10px;
    padding: 5px;
}