JSFiddle - React, Tailwind, and code Playground

by Pasia

HTML

<body>
    
    <div id="top" class="row">
      <div id="content1">content1</div>
    </div>

    <div id="main" class="row">
      <div id="content2">content2</div>
    </div>
    
</body>

CSS

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

.row{
    display:table-row;
    width:100%;
    background:red;
}
#top{
    height:100px;
}
#content1{
    background:yellow;
    height:100%;
}
#content2{
    overflow:scroll;
    height:100%;
    border:1px solid black;
}