子项调整大小时自动调整父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/