jQuery UI resizable problem when adding elements on the fly

I'm using the UI resizable to expand the viewform (id) and when I start to resize the viewform (id) and then开发者_运维问答 I add element on the fly in it the box will not expand anymore.

Its easier if you look at this screencast I did to explain http://screencast.com/t/TmCzYg8HFSvd

$( "#viewform" ).resizable({
        minWidth: 560
    }); 

<div class="box" id="viewform"></div>

The problem is that the resizer adds a height once you start resizing the element, and so it stops following the size of the contents.

If you want to only resize in width, and keep the height always relative to its contents, you will need to use the .stop event and reset the height to auto

$("#viewform" ).resizable({
    minWidth: 560,
    stop: function(event, ui) {       
        $(ui.element).height('auto');
    }
 }); 

demo at http://jsfiddle.net/gaby/Me8AG/