JSFiddle - React, Tailwind, and code Playground

by gudoy

HTML

<div id="layout">
  <div id="header">Header</div>
	<div id="body">
    <aside id="aside"></aside>
    <div id="main">
      <header>
        <h1>Some Title</h1>
      </header>
      <div id="mainContent">
        Some content goes here...
      </div>
    </div>
	</div>
</div>

CSS

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

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

#layout { height:100%; display:-webkit-flex; display:-ms-flexbox; display:-ms-flex; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; }

#header { width:120px; background:violet; }
#body { background:green; display:-webkit-flex; display:-ms-flexbox; display:-ms-flex; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex:1; -ms-flex:1; flex:1; }

#aside { display:none; }
#main { background:yellow; display:-webkit-flex; display:-ms-flexbox; display:-ms-flex; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex:1; -ms-flex:1; flex:1; }

#mainContent { -webkit-flex:1; -ms-flex:1; flex:1; }

/* EXPECTED: */
/* Applying a width:100% on the header, altough unecessary, shouldn't have any effect here
/* WORKS in latest Chrome, Opera & IE */
/* FAILS in Firefox 21 (20+??): it uses the width of the largest content as the base size for its flexbox calculation. */
#main header { width:100%; background:orange }
.test #main header { width:100%; }

JavaScript

$(document).ready(function()
{
    $('html').addClass('test');
})