CODEWITHSUNDEEP
htmlcss
seth
seth

Reputation: 345

How to keep children divs from growing bigger than their parent div

I want to be able to add text to a child div, but never have it get bigger than its parent, but rather get scrollbars on the child. Currently I have:

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

You can see the entire page with the css at this fiddle. click on the 'add line' button a few times and you will see the problem.

What happens is as text is added to the #helplog div, eventually it pushes everything past the border of the #chatwindow div. So you get: after adding lots of line.

Notice that the text, e.g., line 7 and 8, and the msgbox (which is outlined in red) have moved out of the black borders which surround their parent, #chatwindow.

I have tried adding wrappers with position:absolute, but either this collapses the entire box or it has no effect. The goal if for the #chatwindow div to remain the same size and for the text in #helplog to scroll.

How can I avoid this?

Upvotes: 1

Views: 543

Answers (1)

J Delaney
J Delaney

Reputation: 589

If you want it to scroll instead of overflow you can add overflow-y: scroll as a CSS property to #chatwindow. This will cause it to become a scrollable area when it gets too big.

#foo {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  
  overflow-y: scroll;
}
<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>

Upvotes: 2

Related Questions