JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    </div>
    
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

CSS

.wrapper{
        height:400px;
        border-left:1px solid red;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: [header] auto [content]1fr [footer]auto;
    }
    .header{
        grid-row: header;
    }
    .footer{
        grid-row: footer;
    }
    .header, .footer{
        background-color: #EEE;
    }
    .scroller{
        background-color: #CCC;
        overflow:auto;
        grid-row: content
    }