JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

<div class="parent">
    <div id="fixed">
        <div class="flexible">One</div>
    </div>
</div>
<div class="parent">
    <table border="0" cellspacing="5" cellpadding="5" width="200">
        <tr><td width="100">
            <div class="flexible">Two</div>
        </td></tr>
    </table>
</div>
<div class="parent" style="width: 300px">
    <div id="fluid">
        <div class="flexible">Three</div>
    </div>
</div>

CSS

#fixed { width: 200px; }
#fluid { width: 100%; }

.flexible { background-color: red }

JavaScript

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

$( ".flexible" ).each( function ( i, el ) {
   var parents = $( this ).parentsUntil( ".parent" ),
       fluid = true, width = 0;
    $.each( parents, function ( j, p ) {
       var w = this.style.width || this.getAttribute( "width" ) || getStyle( this, "width" );
        console.log( "Width", w );
        if ( w && !/%/.test( w ) ) {
            width = parseInt( w, 10 );
            fluid = false;
            return false; // break this $.each
        }
    });
    
    this.innerHTML += " " + ( fluid ? "Fluid Width" : "Fixed Width @ " + width + "px" );
});