0

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.

Clonkex
  • 3,373
  • 7
  • 38
  • 55

1 Answers1

3

#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;

VilleKoo
  • 2,827
  • 2
  • 14
  • 23
  • Hmm that works in my JSFiddle test case, but not in my real application... let me see if I can find any reason for that... – Clonkex Mar 21 '17 at 08:27
  • Aha! Ok it _does_ work when the height of the parent div is set, however the thing that confused me for so long is the fact that it also bugs out weirdly if you have a ``. Looks like that solution will work for me, just need to remove the legend. – Clonkex Mar 21 '17 at 08:30
  • Since I also want to have the parent div fill some remaining vertical space, I'll set a flexbox on the parent div's parent div. – Clonkex Mar 21 '17 at 08:31