Fieldset child with height 100% is too big
<p>I am trying to stretch a <code>fieldset</code> child to 100%, but the child (<code>ul</code>) is too big and some overflow appears (is cut in my case).  </p>

<p>How can I stretch the <code>fieldset</code> child to 100%, but without overflow?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>fieldset {
  height: 300px;
  overflow: hidden;
}
ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
    background-color: #ffffbb;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset&gt;
  &lt;legend&gt;How to stretch child&lt;/legend&gt;
  &lt;ul&gt;
    &lt;li&gt;item 1&lt;/li&gt;
    &lt;li&gt;item 2&lt;/li&gt;
    &lt;li&gt;item 3&lt;/li&gt;
    &lt;li&gt;item 4&lt;/li&gt;
    &lt;li&gt;item 5&lt;/li&gt;
    &lt;li&gt;item 6&lt;/li&gt;
    &lt;li&gt;item 7&lt;/li&gt;
    &lt;li&gt;item 8&lt;/li&gt;
  &lt;/ul&gt;
&lt;/fieldset&gt;</code></pre>
</div>
</div>
</p>

<p>Just in case here is also external fiddle: <a href="https://jsfiddle.net/zp966jog/1/" rel="nofollow">Example in Fiddle</a>.</p>

<p><strong>Edited:</strong></p>

<p>Setting height to specific pixel is necessary. I get form layout (design) through WebSocket from C# windows application. Every component is position absolute with exact same properties as in C# application. That means, left, top, width and height.</p>