fixed position div flies on resizing

Question

I am using jquery ui to resize div but my fixed position div is moving to top on resize.

Here is fiddle

try to resize the div it flies to top.

jquery ui

$('.chatwnd').resizable({
            maxHeight: 550,
            maxWidth: 700,
            minHeight: 350,
            minWidth: 300,
            handles: "n, e"
        });​

css

.chatwnd{
    position:fixed;
    bottom:0px;
    left:50px;
    height: 350px;
    width:auto;
    min-width:300px;
    max-width:700px;
    border:1px solid #ccc;
    box-shadow:0px 0px 1px #777;
    border-radius: 5px;
    background:#ffffff;
    overflow:hidden;
    box-sizing:border-box;
    -webkit-transition:height 1s;
}​

html

<div class="chatwnd" > </div>​

How can i resize it???

Answer 1

Apparently position: fixed; isn't supported when it comes to resizable ( JQuery UI resizable does not support position: fixed; Any recommendations? ).

Check out the accepted answer in the post above, I think they found a solution!