JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div class="container">
    <div class="header">
        {sampleHeader}
    </div>
    <div class="content">
        {sampleText}
    </div>
</div>

CSS

html, body {height:100%; margin:0px; padding:0px;}
.container {
    display:flex;
    flex-direction: column;
    height: 100%;
}

.container .header {
    height:50px;
    background: #FC0;
    flex-grow:0;
}
.container .content {
    overflow: scroll;
    overflow-x: hidden;
    background: #FFEEAA;
    flex-grow:1;
}