nines nines - 1 month ago 16
CSS Question

Scroll bar for a child element

I have a div inside another dive. Since the outer div has a fixed size the inner one should have a scroll bar. I know how to add my scroll bar to the outer one, but whenever I try to move it to the inner one it simply overflows the outer one, completely ignoring its borders.

Hard to describe. I hope it is clearer when you look at it.

<div style="height:5em;background-color:#eee;overflow:auto">
<div>Should not have a scroll bar (is dynamic)</div>
<div style="margin:1ex;background-color:#f00;">
Should have a scroll bar (is dynamic)<br>
Too much stuff<br>
Too much stuff<br>
Too much stuff<br>
Too much stuff<br>
Too much stuff<br>
</div>
</div>

Answer

The div that you want to have a scrollbar must have a height. Try this:

<div id="top" style="height:5em;background-color:#eee;">
  <div id="first-child">Should not have a scroll bar (is dynamic)</div>
  <div id="second-child" style="margin:1ex;background-color:#f00;height:1em;overflow:auto;">
    Should have a scroll bar (is dynamic)<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
  </div>
</div>