JqueryUi resizable issue, alsoResize expands beyond containment!

i have this structure of DIVs

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

and i made the 'outer' div resizable() using this jqueryUi

$("#开发者_如何学Pythonouter").resizable({ containment: 'parent', alsoResize: "#inner"  });

till now every thing is OK!

//////////////// the issue /////////////////

When i resize the outer it resize the inner with it but when it reaches the 'container' div it STOPS which is OK but the inner keep resizing with the mouse moving and exceed the 'container' and the 'outer' DIVs!!!!

can i make the 'inner' ALSO STOPS with the 'outer' when it reaches the 'container' div limits????

Thank You in advance, i know you can help :)

Are you sure you need to use alsoResize? Shouldn't you fix this by using correct markup and css?

You can solve this issue by setting maxHeight and maxWith for your container.

$("#outer").resizable({
    alsoResize: '#inner',
    containment: 'parent',
    maxHeight: 500,
    maxWidth:500
});

Check working example at http://jsfiddle.net/WV2nn/

In my case, i have the draggable & resizable layer together.. And it let the resize happen beyond the parent container... How can we fix that?