当孩子调整大小时自动调整父div的大小 - jQuery Resizable

Question

我正在使用jQueryUI Resizable以及如何在调整子div的大小时仅调整父div的高度并触摸父div的底端。调整大小时，儿童div也不应该出门。

这就是我的代码：

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'       
    })
});

同时检查小提琴; http://jsfiddle.net/hjtBA/122/

Answer 1

您可以将min-height和min-width应用于父容器，并删除包含。 这将使父div与子div一起扩展。

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

并删除限制

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

更新了你的jsfiddle。 http://jsfiddle.net/hjtBA/126/