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.

回答1:

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

来源：https://stackoverflow.com/questions/42921671/make-child-div-overflow-inside-parent-div

标签

html

css

overflow