CSS Deep Nested Overflow

Question

I have a 3 column layout with a navigation across the top. The 3 columns is constructed as a side-menu with a container and within that container is another side-menu with a container alongside it.

I'm trying to make it so that all of the divs will scroll within the viewport using overflow-y: scroll but with my current state of things it seems to be ignored and the whole page is scrolling as a whole instead.

Not sure what I'm misunderstanding. I've constructed a Codepen with my current state of things.

sol · Accepted Answer · 2018-05-25 03:24:17Z

1

Is this the effect you want?

I removed height property from outer-container, inner-side-menu and inner-container

html body {
  height: 100vh;
  margin: 0;
}
#app {
  background: black;
}
.navigation {
  background: cyan;
  height: 60px;
}

.route-container {
  display: grid;
  grid-template-columns: 0.25fr 0.75fr;
  grid-template-rows: auto;
  grid-template-areas:
    "outer-side-menu outer-container";
  
  height: calc(100vh - 60px);
  background: magenta;
}
.outer-side-menu {
  background: orange;
  grid-area: outer-side-menu;
}
.outer-container {
  background: yellow;
  grid-area: outer-container;
  display: grid;
  grid-template-columns: 0.25fr 0.75fr;
  grid-template-rows: auto;
  grid-template-areas:
    "inner-side-menu inner-container";
    
  /* added */
  overflow: scroll;
  
  /* removed height: 100% */
}
.inner-side-menu {
  background: lime;
  grid-area: inner-side-menu;
  font-size: 144px;
    
  /* prevent horizontal scrolling */
  overflow-x: hidden;
}
.inner-container {
  background: red;
  grid-area: inner-container;
  font-size: 144px;
    
    
  /* prevent horizontal scrolling */
  overflow-x: hidden;

}

<div id="app">
  <div class="navigation">Navigation</div>
  <div class="route-container">
    <div class="outer-side-menu">Side Menu</div>
    <div class="outer-container">
      <div class="inner-side-menu">Inner Side Menu Inner Side Menu Inner Side Menu</div>
      <div class="inner-container">Inner Container Inner Container Inner Container Inner Container</div>
    </div>
  </div>
</div>

answered May 25, 2018 at 3:24

sol

23k6 gold badges46 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Esmail Over a year ago

Your answer is correct but I'm not sure why. I realized my original structure is wrong from my application so im trying to understand the core concepts so i can apply it. You chose to use overflow-x: hidden. Is it also correct to say that I can use overflow-y: scroll to the appropriate div and add height: 100% to all the parent divs?

Aryan Twanju · Accepted Answer · 2018-05-25 03:18:10Z

0

You should use max-height:100% instead of height:100%. Try changing this.

.outer-side-menu {
  background: orange;
  grid-area: outer-side-menu;
  overflow-y: scroll;
  max-height: 100%;
}
.inner-side-menu {
    background: lime;
    grid-area: inner-side-menu;
    overflow-y: scroll;
    height: 100%;
    font-size: 144px;
}
.inner-container {
    background: red;
    grid-area: inner-container;
    overflow-y: scroll;
    height: 100%;
    font-size: 144px;
}

answered May 25, 2018 at 3:18

Aryan Twanju

2,5161 gold badge13 silver badges12 bronze badges

Collectives™ on Stack Overflow

CSS Deep Nested Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related