JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
  <legend>How to stretch child</legend>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
  </ul>
</fieldset>

CSS

fieldset {
  height: 300px;
  overflow: hidden;
}

ul {
  display: flex;
  flex-direction: column;
  /* height: 100%; */
  justify-content: space-around;
  background-color: #ffffcc;
  margin: 0;
}

legend {
  height: 15px;
}

ul {
  height: calc(100% - 15px);
}