CODEWITHSUNDEEP
htmlcssoverflow
Clonkex
Clonkex

Reputation: 3637

Make child div overflow inside parent div?

I've looked a dozens of questions and answers and searched for hours and I cannot find any information on this specific scenario.

So I have a parent div with a child div inside it. The child div contains some content, enough to spill outside the parent div. For some reason (I have no idea why) the child div isn't creating a scrollbar, even with overflow: auto. Simple demonstration of the issue:

HTML:

<fieldset id='parentDiv'>
  <div id='childDiv'>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
  </div>
</fieldset>

CSS:

#parentDiv {
  background: red;
  height: 200px;
}

#childDiv {
  background: green;
  overflow: auto;
}

JSFiddle

Can someone explain to me why this happens and how I can make the child simply add a scrollbar instead of exploding out of the parent? Thanks for any help.

EDIT: The fieldset is just because it makes it easy to see the issue, but the same happens if the parent is a plain old div as well.

Upvotes: 0

Views: 2188

Answers (1)

VilleKoo
VilleKoo

Reputation: 2854

#parentDiv {
  background: red;
  height: 200px;
  overflow-y: scroll;
}

#childDiv {
  background: green;
}
<fieldset id='parentDiv'>
  <div id='childDiv'>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
    <p>some text yo</p>
  </div>
</fieldset>

You need to add overflow to the parent: overflow-y: scroll;

Upvotes: 3

Related Questions