javascript - JQuery UI resizable/#constrain-area -> Constrain not smalle than child div elements -

so far jqueryui works can make resizable <div></div> element not bigger parent, in example: https://jqueryui.com/resizable/#constrain-area

this means cannot make blue area bigger orange one, because <div>blue</div> child of <div>orange</div>

what want opposite: <div>orange</div> should not allowed resized smaller still fits children <div>blue</div> , <div>red</div>

here example:

because resize bottom/right corner maximum minus resize should be:

the dom tree looks this:

my question is, if possible such restraining jqueryui , if not know solution or javascript library supports restraining this.

you can behavior using jquery, here can find jsfiddle

  var minwidth = 0;   var minheight = 0;    $.each( $('#main'), function(i, divs) {      $('div', divs).each(function() {         var tmpwidth = $(this).position().left + $(this).width();             if (tmpwidth > minwidth)         minwidth = tmpwidth;       var tmpheight = $(this).position().top + $(this).height();             if (tmpheight > minheight)         minheight = tmpheight;      });   });   $('.orange').resizable({             resize : function(event, ui){             $(this).resizable( "option", "minwidth", minwidth);             $(this).resizable( "option", "minheight", minheight);         }     });