Сделать содержимое div прокрутить вниз с переполнением

Я создал небольшую систему чата для проекта, который я делаю. Чат работает нормально. Тем не менее, я не могу понять, как сделать так, чтобы div оставался в нижней части чата, вместо того, чтобы прокручивать вниз, чтобы прочитать последнее, что кто-то сказал.

Я имею в виду еще один подобный вопрос, размещенный здесь для руководства. Как сохранить div, прокручивающийся снизу, когда HTML-текст добавляется к нему через jquery, но скрывает полосу прокрутки?

Но это все равно не сработает для меня. Чат затем сохраняется в файле chat.txt. Каждая строка окружена тегами. Ниже приведен код, который я использую.

js в заголовке:

$container = $('#chat-area');
$container[0].scrollTop = $container[0].scrollHeight;

$('#sendie').keypress(function (e) {
  if (e.which == 13) {
    $container = $('#chat-area');
    $container.append('<p>' + e.target.value + '</p>');
    $container.animate({ scrollTop: $container[0].scrollHeight }, "slow");
  }
}); 

chat.php:

<script type="text/javascript">


    // strip tags
    name = name.replace(/(<([^>]+)>)/ig,"");

    // display name on page
    $("#name-area").html("You are: <span>" + name + "</span>");

    // kick off chat
    var chat =  new Chat();
    $(function() {

         chat.getState(); 

         // watch textarea for key presses
         $("#sendie").keydown(function(event) {  

             var key = event.which;  

             //all keys including return.  
             if (key >= 33) {

                 var maxLength = $(this).attr("maxlength");  
                 var length = this.value.length;  

                 // don't allow new content if length is maxed out
                 if (length >= maxLength) {  
                     event.preventDefault();  
                 }  
              }  
                                                                                                                                                                                                        });
         // watch textarea for release of key press
         $('#sendie').keyup(function(e) {   

              if (e.keyCode == 13) { 

                var text = $(this).val();
                var maxLength = $(this).attr("maxlength");  
                var length = text.length; 

                // send 
                if (length <= maxLength + 1) { 

                    chat.send(text, name);  
                    $(this).val("");

                } else {

                    $(this).val(text.substring(0, maxLength));

                }   


              }
         });

    });
</script>

<p id="name-area"></p>
    <div id="chatWrap"><div id="chat-area"></div></div>

    <form id="send-message-area">
        <p>Your message: </p>
        <textarea id="sendie" maxlength = '100' ></textarea>
   </form>

</div>

CSS:

#pageWrap
{

    position: fixed;
    display: block;
    right: 0;
    bottom: 0;
    background: #8B1918;
    box-shadow: 0px 0px 12px #333;
    transition: height .5s;
}

#pageWrap p
{
    color: white;
    font-family: arial;
    margin-left: 5px;
    margin-bottom: 4px;
}

#chatWrap
{
    width: 200px;
    height: 200px;
    overflow: scroll;
    overflow-x:hidden;
    box-shadow: 1px 1px 10px #333 inset;
    color: white;
    font-family: arial;
    font-size: 14px;
}

#chat-area
{
    padding-left: 11px;
}

#sendie
{
    resize: none;
    display: block;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
}