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

user_4014767 0
Viewed 901

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/

css html
1 Answers

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>

user_57243030
Related