38

I have a problem with a div not being clipped to the parent even though it has overflow: hidden.

I've looked through the overflow: hidden questions here on stackoverflow but most of them either have problems with position or seem to suggest that my code should work.

Here's a MWE, you can find the jsfiddle here:

<div id="parent">
  <div id="scroller">
    <div id="child">
      meh
    </div>
  </div>
</div>

CSS:

#parent {
  height: 500px;
  overflow: hidden;
}

#scroller {
  overflow: scroll;
}

#child {
  height: 10000px;
}

What I expect

#parent has overflow: hidden so #scroller gets clipped to the height of parent. Because its #child is taller than the resulting height overflow: scroll results in a scrollbar.

What happens

#scroller just uses the height of #child and ignores both overflow properties.

What about simple workarounds?

  • In my real world problem there is multiple <div>s in #parent so I can't give #scroller a height.
  • The html is generated automatically so I can't just remove #scroller.

Thanks for all help, Stefan

ANSWER

There actually is a CSS-only answer in the comments with display: flex. See:

https://jsfiddle.net/huocukw7/6/

#parent {
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction:column;
}

#scroller {
  overflow: auto;
  flex-grow:1;
}

#child {
  height: 10000px;
}
Improve this question
8
  • show us your real world example otherwise we cannot help - ie are they nested, are they other sections within the parent? - it may be a case of giving these multiple divs a height too Commented Apr 21, 2017 at 9:48
  • @Pete: Who's "they"? And I wrote that there are multiple divs in parent. The question can easily be answered with the MWE at hand. As per Mr. Alien's answer the problem is that scroller needs a height and the only way to correctly fill the parent is to resort to javascript. Commented Apr 21, 2017 at 13:33
  • they is the other divs, and no it's not - if you give us the actual structure I can show you a pure css way to give that div a height but if you can't be bothered then well use your js. I've moved on so good luck if you're not willing to put in the effort, then neither am I Commented Apr 21, 2017 at 13:38
  • 2
    and that wasn't too hard now was it - here you go, use display:flex: jsfiddle.net/huocukw7/6 Commented Apr 21, 2017 at 13:46
  • 1
    Added it to the question in an edit. EDIT: And posted it as an answer because that's what I tend to read first on stackoverflow. I now feel dirty stealing your answer. :P Commented Apr 21, 2017 at 14:42

5 Answers 5

Reset to default
23

All you need to do is provide height to your #scroller

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

Demo

As per your point - In my real world problem there is multiple s in #parent so I can't give #scroller a height.

There is no other way you can make it scrollable without assigning a height to it. Without that, it will stretch until the child element ends which won't make your wrapper scrollable.

You can use JavaSript here, to calculate the height on runtime and append it to the element.

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

1 Comment

Thanks. I feared I'd have to resort to javascript because of CSS's shortcomings. It's good to have confirmation at least.
12

There actually is a CSS-only answer in the comments with display: flex. See:

#parent {
  background-color: blue;
  padding: 10px;
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#scroller {
  overflow: auto;
  padding: 10px;
  background-color: red;
  flex-grow: 1;
}

#child {
  height: 10000px;
  background-color: green;
}
<div id="parent">
  <div id="something">
    div of varying height
  </div>
  <div id="scroller">
    <div id="child">
      meh
    </div>
  </div>
</div>

Improve this answer

Comments

0

Although you said you can't add an explicit height to #scroller, what about adding height:inherit;. That has the desired effect of adding a scrollbar.

Improve this answer

1 Comment

Thanks for the suggestion. Unfortunately that's the same as adding height: 100%;.
0

For posterity - I had this same issue using Foundation's Reveal overlay.

body.is-reveal-open had overflow: hidden;

.reveal-overlay had overflow-y: scroll; (<-- this was the culprit)

and my child element which I wanted to have a scrollbox had a large explicit height, a smaller max height, and overflow: scroll.

After much debugging I narrowed down the issue and this ended up fixing it:

.reveal-overlay {
  overflow: hidden; // changed from overflow-y: scroll
}

Don't ask me why this worked, I have no clue. But it did.

Improve this answer

Comments

0

Here is a solution for Bootstrap 4 user, what you need to concern is only how to place the correct Flex-related class in the right place. Since parent has only 1 direct child, it is quite simple:

HTML

<div class="d-flex flex-column" id="parent">
  <div class="h-100" id="scroller">
    <div id="child">
      meh
    </div>
  </div>
</div>

CSS (You don't need to do anything with CSS, I just copy it from the question)

#parent {
  height: 500px;
  overflow: hidden;
}

#scroller {
  overflow: scroll;
}

#child {
  height: 10000px;
}

One more tip: if you have multiple direct children under parent and require the scroller to fill the remaining height of the parent <div>, then you will need to apply flex-grow-1 class instead of h-100 to the scroller. (For those who are familiar with android development, the flex-grow-1 have the similar effect as layout_height=0dp or layout_width=0dp in a constraintlayout)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.