如何让孩子们比父母的div更大

Question

我希望能够将文本添加到子div中，但永远不会让它比其父级更大，而是在子级上获取滚动条。目前我有：

<div id="chatwindow">
  <div class="dragtitle">This is a title</div>
  <div id="chatcontainer">
    <div id='helplog'></div>
    <div id='msgline'><textarea rows="2"></textarea></div>
  </div>
</div>

您可以在this fiddle处看到包含css的整个页面。单击“添加行”按钮几次，您将看到问题。

当文本被添加到#helplog div时会发生什么，最终它会将所有内容推送到#chatwindow div的边界。所以你得到：。

请注意，文本（例如第7行和第8行）以及msgbox（以红色标出）已移出围绕其父级#chatwindow的黑色边框。

我尝试使用position:absolute添加包装器，但要么折叠整个盒子，要么它没有效果。目标是#chatwindow div保持相同的大小，以及#helplog中的文字滚动。

我该如何避免这种情况？

Answer 1

如果您想要滚动而不是溢出，可以将overflow-y: scroll作为CSS属性添加到#chatwindow。当它变得太大时，这会使它成为一个可滚动的区域。

＆＃13;

＆＃13;

#foo {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  
  overflow-y: scroll;
}

＆＃13;

<div id="foo">
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
</div>

＆＃13;

＆＃13;

＆＃13;