让childdiv在parentdiv里面溢出？

Question

我已经查看了几十个问题和答案并搜索了几个小时，但我找不到关于这个特定场景的任何信息。

所以我有一个 parent div 里面有一个 child div。 child div 包含一些内容，足以溢出 parent div 之外。出于某种原因（我不知道为什么）child div 没有创建滚动条，即使 overflow: auto 也是如此。问题的简单演示：

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

有人可以向我解释为什么会发生这种情况以及如何让 child 简单地添加一个滚动条而不是从 parent 中爆炸出来吗？感谢您的帮助。

编辑： fieldset 只是因为它可以很容易地看到问题，但如果 parent 是一个普通的旧版本，也会发生同样的情况div 还有。

Answer 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>

你需要给父级添加overflow: overflow-y: scroll;

让childdiv在parentdiv里面溢出？

Make child div overflow inside parent div?

html

css

overflow