JSFiddle - React, Tailwind, and code Playground

HTML

<div class=container>
 <table class=theTable cellspacing=5 cellpadding=2>
  <tr>
   <td class="topSection">
    <div>n items of unknow height (no scroll)</div>
   </td>
  </tr>
  <tr>
   <td class=midSection>
    <div class=scrollContainer>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
    </div>
   </td>
  </tr>
  <tr>
    <td class=bottomSection>
     <div>n items of unknow height (no scroll)</div>
    </td>
  </tr>
 </table>
</div>

CSS

body, html{
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
body{
  position: static;
}
.container {
  height: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.theTable{
  width: 100%;
  height: 100%;
}
.topSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}
.midSection{
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
  padding: 5px;
}
.scrollContainer{
  height: 100%;
  max-height: 200px;
  overflow-y: auto;
}
.bottomSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}