CSS overflow-y for deeply nested divs

Question

I'm trying to understand how come my deepest two divs aren't scrolling in the y-direction.

It's a 2 column layout nested within another 2 column layout, essentially looking like 3 columns. I've also made a Codepen to demonstrate my exact architecture:

My current solution applies an overflow-y: scroll to the two divs I want to scroll and all parent divs have been applied with max-height: 100%; overflow: hidden.

Why doesn't this work? What is the best approach I should take?

html body {
  margin: 0;
}
#app {
  padding-top: 60px;
  width: 100vw;
  height: 100vh;
  background: black;
  height: calc(100vh - 60px);
}
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 9999;
  background: cyan;
}
.route-container {
  display: grid;
  grid-template-columns: 0.2fr 0.8fr;
  grid-template-rows: auto;
  grid-template-areas:
    "sidemenu container";
  
  max-height: 100%;
  overflow: hidden;
  
  background: magenta;
}
.outer-side-menu {
  background: orange;
  grid-area: sidemenu;
}
.outer-container {
  grid-area: container;
  background: yellow;
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto;
  grid-template-areas: 
    "tab-menu"
    "tab-container";
  
  overflow: hidden;
  max-height: 100%;
}
.tab-menu {
  grid-area: tab-menu;
  background: red;
}
.tab-container {
  grid-area: tab-container;
  background: purple;
  
  max-height: 100%;
  overflow: hidden;
}
.content-container {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  grid-template-rows: auto;
  grid-template-areas: "inner-menu inner-content";
  
  max-height: 100%;
  overflow: hidden;
  
  font-size: 144px;
  background: teal;
}
.inner-menu {
  grid-area: inner-menu;
  overflow-y: scroll;
  background: pink;

}
.inner-content {
  grid-area: inner-content;
  overflow-y: scroll;
  background: teal;
}

<div id="app">
  <div id="navbar">Navigation</div>
  <div class="route-container">
    <div class="outer-side-menu">Side Menu</div>
    <div class="outer-container">
      <div class="tab-menu">
        Tabs
      </div>
      <div class="tab-container">
        <div class="content-container">
          <div class="inner-menu">
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
          </div>
          <div class="inner-content">
            Inner Content 
            Inner Content 
            Inner Content 
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Your deepest two divs aren't scrolling because they aren't actually overfilling. If you checkout the height on these two divs (and the height of the parent divs), you can see they are nearly 3000px tall, with enough room for all of your text.

Dev Tools showing the height of one of the divs

They appear to be constricted to a small size because the overflow of the .route-container is hidden. See:

.route-container {
    display: grid;
    grid-template-columns: 0.2fr 0.8fr;
    grid-template-rows: auto;
    grid-template-areas: "sidemenu container";
    max-height: 100%;
    overflow: hidden;
    background: magenta;
}

To resolve this, I would use display: flex; instead of display: grid;. The result allowed for those two boxes to scroll individually.

html body {
    margin: 0;
}

#app {
    width: 100vw;
    height: 100vh;
    background: black;
    display: flex;
    flex-direction: column;
}

#navbar {
    width: 100vw;
    height: 20vh;
    background: cyan;
}

.route-container {
    display: flex;
    flex-direction: row;
    background: magenta;
    height: 85vh;
}

.outer-side-menu {
    background: orange;
    width: 100%;
}

.outer-container {
    background: yellow;
    display: flex;
    flex-direction: column;
}

.tab-menu {
    background: red;
}

.tab-container {
    background: purple;
}

.content-container {
    display: flex;
    flex-direction: row;
    max-height: 75vh;
    overflow: hidden;
    font-size: 144px;
    background: teal;
}

.inner-menu {
    overflow-y: scroll;
    background: pink;
}

.inner-content {
    overflow-y: scroll;
    background: teal;
}

Grid is probably too restrictive to allow the inner divs to scroll without also scrolling the 'Tabs' and 'Side Menu' altogether.