JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<div id="content">
        <div id="elem">sss
            <div id="bras">zzz</div>
        </div>
        <div id="elem2">aaa</div>
</div>

<div id="log"></div>

CSS

html, body { width:100%; height:100%; }

#content {
    position:absolute;
    top:20%;
    left:20%;
    width:60%;
    height:60%;
    background:rgba(255,0,255,0.3);
    overflow:visible;
}

#log { font-size:0.7em; }

#elem {
    background:black;
    width:100%;
    height:100%;
}

#elem2 {
    background:red;
    width:100%;
    height:100%;
}

.wrap {
    position:absolute;
    background:red;
    margin:0; padding:0;
    /*display:inline-block;*/
    /*text-align:center;*/
}

#bras {
    height:20%;
    width:120%;
    position:absolute;
    left:-10%;
    top:40%;
    background:green;
}

JavaScript

var $log =  $("#log").css({position:"absolute",top:0,left:0,zIndex:-1});

//console.log( getSize(e) );
var $c = $("#content");
var $e = $("#elem");
var $e2 = $("#elem2");



var $w = $("<div/>").addClass("wrap");
var $w2 = $("<div/>").addClass("wrap");

$e.wrap($w);
$e2.wrap($w2);
$wrap = $e.parent();
$wrap2 = $e2.parent();

var e1 = {
    w:80, /* % */
    h:30,
    minw:60, /* px */
    maxw:600,
    minh:10,
    maxh:130,
    ratio:1.33, /* width / height */
    $:$wrap
};

var e2 = {
    w:30, /* % */
    h:30,
    minw:33, /* px */
    maxw:333,
    maxh:180,
    ratio:1.66, /* width / height */
    $:$wrap2
};

$(window).on("resize",function(){
    //$log.empty();
    testSize(false,4,4,true,true);
}).resize();

function getPositions(list)
{   var o = {e:[],
             w:{    tmin:0,
                    tmax:0,
                    tval:0,
                    min:-1,
                    max:0,
                    val:0
               },
             h:{    tmin:0,
                    tmax:0,
                    tval:0,
                    min:-1,
                    max:0,
                    val:0
               },
             n:list.length
            };
 
    $.each(list,function(n,e){
        var p = getPosition(e);
        
        o.w.tmin += p.w.min;
        o.w.tmax += p.w.max;
        o.w.tval += p.w.val;

        o.h.tmin += p.h.min;
        o.h.tmax += p.h.max;
        o.h.tval += p.h.val;
        
        /*log("w "+p.w.max);
        log("h "+p.h.max);*/
        if(o.w.min < 0)    o.w.min = p.w.min;
        else               o.w.min = Math.min(o.w.min,p.w.min);

        o.w.max = Math.max(o.w.max,p.w.max);
        
        if(o.h.min < 0)    o.h.min = p.h.min;
        else               o.h.min = Math.min(o.h.min,p.h.min);

        o.h.max = Math.max(o.h.max,p.h.max);

        o.e.push( p );
    });

    // compute nominal value
/*    var add = function(a,b){ return a+b; };*/
    o.w.val = o.w.tval/o.n;//total.w.val.reduce(add,0);
    o.h.val...