JQuery UI resizable/# constrain-Bereich -> Constrain nicht smalle als Kind div Elemente

Question

bisher funktioniert jQueryUI, dass ich meine Größe veränderbares <div></div> Element macht nicht größer dann seinen Eltern, wie in diesem Beispiel: https://jqueryui.com/resizable/#constrain-area

Dies bedeutet, ich kann nicht die blaue Fläche macht größer als die orangefarbenen, weil <div>blue</div> das Kind <div>orange</div> ist

Was ich tun möchte, ist das Gegenteil: die <div>orange</div> sollte dann nicht erlaubt werden, um kleinere Größe verändert, dass es noch paßt es Kinder <div>blue</div> und <div>red</div>

Hier ist ein Beispiel:

Weil wir von unten/rechts sollte die maximale minus die Größe Resize sein:

Der DOM-Baum sieht wie folgt aus:

Meine Frage ist, wenn es möglich ist, eine solche Einschränkung mit JQueryUI zu tun und wenn nicht jemand eine Lösung oder eine andere JavaScript-Bibliothek, die unterstützt so zurückhaltend.

Answer 1

Sie dieses Verhalten JQuery verwenden bekommen, here you can find a 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); 
     } 
    });