JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<div id="wrapper">
    <div id="header">
        <div>Header</div>
        <input id="button" type="button" value="Click to Show/Hide" />
        <div id="expand"><p>a</p><p>b</p><p>c</p></div>
    </div>
    <div id="content">
        
        <div id="dynamic">
        <span id="target" style="font-size: 800%">Content</span>
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>

CSS

*
{
    margin:0;padding:0;
}
#wrapper{
    padding: 10px;   
    vertical-align: middle;
    background-color: cyan;
    min-height: 100px;
    max-height: 300px; 
    -ms-box-orient: vertical;
   display: -ms-flex;
   height: 100%;
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-flex; 
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */ 
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */    
   
   -ms-flex-direction: column; 
   -webkit-flex-direction: column;
   flex-direction: column;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#content
{
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
    height:0;
    min-height: 0;
}
#expand{
    background-color: yellow;
}

#dynamic{
    background-color: green;
    overflow: auto;
    overflow-x: hidden;
    min-height: 40px;
}

#header,#footer{
    background-color: purple;
}

html,body
{
    height: 100%;
}

#header, #content, #footer
{
    width: 100%;   
}

JavaScript

$('#button').click(function(){
    if($('#expand').is(":visible"))
        $('#expand').hide();
    else
        $('#expand').show();
});