Resizable + Overflow problem

Resizable + Overflow problem

Hello, I am using jQuery 1.4.2 with jQuery UI 1.8.4 and would like to make my div element resizable. I did so and it functions, however since my div requires overflow: auto; because it loads chat text into it every few seconds, makes it so resizable() shows both scrollbars even when they are not needed, and the actual resizable icon scrolls with the div as new chat gets posted. How can I allow my div to be resized with an overflow set to automatic? Here is my current code

jQuery:
  1. <script type="text/javascript">
  2.       $(function() {
                $(".chat").resizable();
  3.       });
  4. </script>
CSS:
  1. .chat {
        overflow: auto;
        color: #FFFFFF;
        text-align: left;
        width: 670px;
        height: 450px;
        border: 1px solid #CCCCCC;
        background-image: url('http://www.bnetweb.org/webbot/images/webbot.png');
        background-position: top right;
        background-repeat: no-repeat;
    }









HTML:
  1. <div class="chat">
  2.       <div class="chattext"></div>
  3. </div>
"chattext" is just the container I use so jQuery can .load() the chat into the parent div "chat". Any help concerning this issue is appreciated.