JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<body>
    <div id='bodyWrapper'>
        <div id='header'>HEADER</div>
        <div id='wrapper'>
            <div id='leftNav'>left nav</div>
            <div id='container'>
                <div id='main'>MAIN</div>
            </div>
        </div>
        <div id='footer'> <span id='width'></span>

        </div>
    </div>
</body>

CSS

body {
    background-color: #B0BDEC;
}
#wrapper {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    
    background-color: #c9b8ae;
}
#header {
    border: 1px dotted red;
}
#leftNav {
    -webkit-flex: 0 0 80px;
    border: 1px dotted green;
    padding: 2px;
    height: 200px;
}
#container {
    -webkit-flex: 1 1 auto;
    border: 1px solid black;
    padding: 15px;
    overflow: hidden;
    overflow-x: auto;
}
#main {
    border: 1px dotted blue;
    height: 200px;
    min-width: 800px;
}
#footer {
    flex: 1 100%;
}

JavaScript

var text = '| body: ' + $('body').innerWidth() +
    '/' + $('body').outerWidth(true) +
    ' |  container: ' + $('#container').innerWidth() +
    ' | wrapper: ' + $('#wrapper').innerWidth();
$('#width').text(text);

$('#leftNav').click(function(e){
    $(this).css('-webkit-flex','0 0 20px');
    $(this).text('>>');
});