Auto resize parent div when child resize - jQuery Resizable

Question

I'm using jQueryUI Resizable and how to resize only the height of parent div when child div is resized and touch the bottom end of parent div. Also child div shouldn't go outside when resizing.

This is how my codes goes:

HTML

<div id="outer">
    <div id="inner"></div>
</div>

CSS

#outer {
 width:500px;
 height:300px;
 border:dashed 1px #000;
}
#inner {
 width:50px;
 height:50px;
 background:#2d2d2d;   
}

JS

$(function(){
    $('#inner').resizable({
        containment: 'parent'       
    })
});

Also check the fiddle; http://jsfiddle.net/hjtBA/122/

Answer 1

You can apply min-height and min-width to the parent container, and remove the containment. This will make the parent div extend with the child div.

#outer {
    min-width:500px;
    min-height:300px;
    border:dashed 1px #000;
}

and remove containment restriction

$(function(){
    $('#inner').resizable();
});

Updated your jsfiddle. http://jsfiddle.net/hjtBA/126/