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>

Purple_Kitten · Accepted Answer · 2018-06-01 06:07:49Z

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.

Sam Esmail · Accepted Answer · 2018-06-01 07:32:12Z

1

Ok I figured it out. The problem was my understanding of height. Child divs weren't adopting the full height they were contained in. I needed to use position along with top, left, bottom, right.

See the following codepen

answered Jun 1, 2018 at 7:32

Sam Esmail

4031 gold badge4 silver badges14 bronze badges

Comments

Nandita Sharma · Accepted Answer · 2018-06-01 03:29:29Z

0

Added height: calc(100vh - 109px); to inner-menu and inner-content div

 Total height of window - (height of Tab bar + Navigation bar)

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;
  height: calc(100vh - 109px); // Total height of window - height of top elements

}
.inner-content {
  grid-area: inner-content;
  overflow-y: scroll;
  background: teal;
  height: calc(100vh - 109px);
}

<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>

answered Jun 1, 2018 at 3:29

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

5 Comments

Sam Esmail Over a year ago

Thank you but is there a solution where divs don’t know anything about their parent divs?

Nandita Sharma Over a year ago

Sorry I dont have such a solution.Even I dont like this solution much. You can wait may be someone else comes up with a better solution. :)

Nandita Sharma Over a year ago

Any luck with what you wanted?

Sam Esmail Over a year ago

yes, i posted a solution above but still have some discrepancies. It gets messed up if the frame gets resized :/

Nandita Sharma Over a year ago

Sorry i dont have MAC . Cant help you with safari

Collectives™ on Stack Overflow

CSS overflow-y for deeply nested divs

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related