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;
}