JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
  <input value="Fixed height">
  <ul class="extendOrShrink">
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
  </ul>
  <input value="Fixed height">
</div>

CSS

ul {
  margin: 0;
}

#wrap {
  position: absolute;
  height: 80%;
  width: 50%;
  border: 3px solid #444;
  display: flex;
  flex-direction: column;
  background-color: #CCC;
}

.extendOrShrink {
  flex-shrink: 1;
  flex-grow: 1;
  overflow: auto;
}