JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<div id="container">
    <div id="titlebar">sdfsdf<br/>sdfsd<br/>sdfsdf</div>
    <div id="body">
        <div>
            <article>
                adipiscing elit. Donec condimentum pretium nisl.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.
        
            </article>
        </div></div>
</div>

CSS

#container {height: 100px; width: 100px; border: solid; }
  #titlebar { background: gray;}
  #body {height: 100px; overflow: auto; background: lightblue;}  

/* CSS overrunned */
html, body {height:100%;width:100%;margin:0;}
#container {display:table;height:100%;width:100%;table-layout:fixed}
#titlebar, #body {display:table-row;height:80%;}
/* overwrite height of titlebar */
#titlebar{height:20%;}
div div {display:table-cell;}
article {overflow:auto;height:100%;display:block;}