Grid and content scrollable regions

[babeal]

I have been banging my head against the wall on this one. We just starting using css grid for layout on a dashboard and I am trying to simplify the scrollable regions as every element in the hierarchy has the height property defined as height: calc(100% - headingHeight) since our developers weren't sure what actually solves the problem and I know there should be a better way to do this. To get a scrollable region i know what the parent element needs to have a height applied but what i am seeing is that an inner div underneath a grid container seems to grab the height of the body element and not the implied height of the parent as defined by the css grid rendering. This might not be directly grid related so if you want to punt I understand. Basically i'm trying to understand the least set of styles to make the red region scroll https://codepen.io/babeal/pen/bmQoey

[babeal]

nevermind I think i figured it out