JSFiddle - React, Tailwind, and code Playground

by Samuel Fullman

HTML

<div id="body">
     <div id="head">
        <p>Fixed size without scrollbar</p>
        <p>Fixed size without scrollbar</p>
    </div>
    <div class="filter">
        <p>filter</p>
        <p>filter</p>
        <p>filter</p>
        <p>filter</p>
        <p>filter</p>
    </div>
    <div class="content">
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar and this is a really long line which will spill over the right boundary even with this tiny font size</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p> -->
    </div>
    <div id="foot">
        <p>Dynamic size without scrollbar 1</p>
        <p>Dynamic size without scrollbar 2</p>
        <p>Dynamic size without scrollbar 3</p>
        <p>Dynamic size without scrollbar 4</p>
    </div> 
</div>

CSS

body, html {
  height: 100%;
}
div {
  box-sizing: border-box;
}
body {
  padding: 15px;
  font-family: Helvetica;
  font-size: 13px;
}
#body {
    x-position: absolute;
    x-top: 15px;
    x-left: 15px;
    height: 90%;
    width: 500px;
    border: black dashed 2px;
    display: flex;
    flex-direction: column;
}
  
#head {
    border: blue solid 1px;
    height: 50px;
    flex-shrink: 0;
}
.filter {
  
}
.content{
    border: red solid 1px;
    overflow-y: auto;
    overflow-x: scroll;
    flex-grow: 1;
}
  
#foot {
    border: green solid 1px;
    flex-shrink: 0;
}