Проблема с получением div для прокрутки [css]

Мне нужно, чтобы прокручивать сообщения с помощью внешнего div. внутренний div расположен в нижней части внешнего div, так что когда новые сообщения добавляются (через JavaScript), они появляются снизу и поднимаются вверх..., который работает, он просто не прокручивается.

   <div id="outside">
    <div id="inside">
        <p>The quick</p>
        <p>brown fox</p>
        <p>jumps</p>
        <p>over the</p>
        <p>lazy</p>
        <p>dog.</p>
        <p>I'm on the bottom!</p>
        <p>I'm on the bottom!</p>
        <p>I'm on the bottom!</p>
        <p>I'm on the bottom!</p>
    </div>
</div>
<style>
#outside {
    height:150px;
    width:300px;
    position:relative;
    overflow-y:scroll;
}
#inside {
    position:absolute;
    bottom:0;
}
</style>

EDIT: посмотреть его в прямом эфире перейдите на http://io-chat.com:85/lobby. Выход в чат - это то, над чем я работаю, если вы продолжаете отправлять сообщения, вы в конечном итоге переполните вывод. У меня есть его для прокрутки сейчас, но он создает большие пробелы наверху...