Overflow hidden with nested overflow scroll not working when the parent has 100% height

Question

I need to have the body's overflow hidden in order to not break the layout while having a child element that has overflowing content but has in itself overflow set to scroll. I've searched for over 4 hours on this and tryed everything I could've think of but with no success.

Is there a way to actually do this WITHOUT javaScript setting a fixed size on runtime?

here's the code:

body
{
overflow: hidden;
}
#parent {
  background-color: blue;
  padding: 10px;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

#scroller {
  overflow: scroll;
  padding: 10px;
  background-color: red;
  height: 100%;
}

#child {
  height: 10000px;
  background-color: green;
}

<div id="parent">
  <div id="scroller">
    <div id="child">
      Overflowing content goes here...
    </div>
  </div>
</div>

https://jsfiddle.net/kn5xv0y3/9/

Not a duplicate of that question. It's not the same problem and the solution proposed on this question perfectly solves MY issue. — Luis Felipe, Jul 02 '19 at 17:29

score 3 · Accepted Answer · answered Jun 27 '19 at 18:40

You forgot to set height: 100% to html and body:

html, body
{
overflow: hidden;
height: 100%;
}
#parent {
  background-color: blue;
  padding: 10px;
  height: 100%;
}

#scroller {
  overflow: scroll;
  padding: 10px;
  background-color: red;
  height: 100%;
}

#child {
  height: 10000px;
  background-color: green;
}

<div id="parent">
  <div id="scroller">
    <div id="child">
      Overflowing content goes here...
    </div>
  </div>
</div>

Overflow hidden with nested overflow scroll not working when the parent has 100% height

1 Answers1