Question

我查了几十个问题和答案并搜索了几个小时，但我找不到有关此特定情况的任何信息。

所以我有一个带有子div的父div。子div包含一些内容，足以溢出父div。出于某种原因（我不知道为什么），即使使用overflow: auto，子div也不会创建滚动条。简单说明问题：

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

有人可以向我解释为什么会发生这种情况以及如何让孩子只是添加一个滚动条而不是从父母那里爆炸？谢谢你的帮助。

编辑： fieldset只是因为它可以让您轻松查看问题，但如果父级也是普通的div，也会发生同样的情况。< / p>

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-y：scroll;

在父div中使子div溢出？

1 个答案: