Resizable in containment

Resizable in containment


Hello,
I'm with a problem in a resizable element.
I have a element that is draggable and resizable only in his parent
area. When I drag it, it works fine but when I resize it, it has a
strange behavior.
I can resize the element outside the area of the parent, in the top
left.
How can I solve this?
Thanks in advice
Here is the code only has an example:
<style type="text/css" media="all">
#parentDiv{
    width:500px;
    height:300px;
    background:yellow;
}
#child{
    position:absolute;
    width:200px;
    height:100px;
    background:red;
}
#all{
    background:gray;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("#child").draggable({ containment: "parent" });
    $('#child').resizable({ containment: "parent", handles: 'all' });
});
</script>
</head>
<body style="">
<div id="all">
<div id="parentDiv" style="margin-left:100px;">
<div id="child">child</div>
</div>
</div>