Полоса прокрутки для дочернего элемента

Question

У меня есть div внутри другого погружения. Поскольку внешний div имеет фиксированный размер, внутренний должен иметь полосу прокрутки. Я знаю, как добавить свою полосу прокрутки к внешней, но всякий раз, когда я пытаюсь переместить ее на внутреннюю, она просто переполняет внешнюю, полностью игнорируя ее границы.

Трудно описать. Надеюсь, это станет понятнее, если вы посмотрите на это.

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

Div, который вы хотите иметь полосу прокрутки, должен иметь высоту. Попробуйте это:

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

Answer 2

<div style="height:5em;background-color:#eee;">
  <div>Should not have a scroll bar (is dynamic)</div>
  <div style="height:3em;margin:1ex;background-color:#f00;overflow:auto"> <!--this has to have a height in order for it to overflow -->
    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 3

Попробуйте это:

<div style="height:5em;background-color:#eee;postion:absolute">
  <div>Should not have a scroll bar (is dynamic)</div>
  <div style="height:4em; margin:1ex;background-color:#f00; 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>

http://jsfiddle.net/kph6G/