JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="tr header">
    <div class='td'>
      <div class="wrapper">
        <div class="content">
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
        </div>
      </div>
    </div>
  </div>
  <div class="tr footer">
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
  </div>
</div>

CSS

body, html{
  margin:0;
  padding:0;
}
div{
  box-sizing:border-box;
}
.container{
  height:100vh;
  width:100vw;
  display:table;
  border-collapse:collapse;
}
.tr{
  display:table-row;
}
.td{
  display:table-cell;
  height:100%;
}
.header{
  height:100%;
  border:1px solid green;
}
.wrapper{
  height:100%;
  position:relative;
  overflow:auto;
  min-height:45px;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.footer{
  border:1px solid blue;
}