使子div在父div内溢出? [英] 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.

所以我有一个父div，其中有一个子div.子div包含一些内容，足以溢出到父div之外.由于某种原因(我不知道为什么)，即使使用overflow: auto，子div也不会创建滚动条.问题的简单演示:

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.

编辑:fieldset只是因为它易于发现问题，但是如果父级也是普通的div，也会发生同样的情况.

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.

推荐答案

#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:滚动；

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

这篇关于使子div在父div内溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！