Fieldset child with height 100% is too big - html

Question

I am trying to stretch a fieldset child to 100%, but the child (ul) is too big and some overflow appears (is cut in my case).
How can I stretch the fieldset child to 100%, but without overflow?
fieldset {
height: 300px;
overflow: hidden;
}
ul {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
background-color: #ffffbb;
}
<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>
Just in case here is also external fiddle: Example in Fiddle.
Edited:
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.

Answer 1

Solution
Add this to your code:
ul { margin: 0; }
fieldset {
height: 300px;
overflow: hidden;
}
ul {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
background-color: #ffffcc;
margin: 0;
}
<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>
Explanation
The ul has default top and bottom margins added by the browser's style sheet.
These margins, when added to height: 100%, cause the overflow.
But even when the overflow issue is fixed, item #8 is packed tightly to the container's bottom edge:
This is because the line-height of the legend also creates height (demo with line-height: 0)
Here are two ways you can handle this:
Define a height for the legend and then adjust the height of the ul. Something like this:
legend {
height: 15px;
}
ul {
height: calc(100% - 15px);
}
demo
Reduce the height of the ul, like this:
ul { height: 95%; }
demo

Answer 2

Use Auto Height for your fields and add Height, Line-height for your li.
Its work clear and nicely.
EDIT: And of course you need to remove the Overflow: hidden; property;
fieldset {
height: auto;
}
ul {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
background-color: #ffffbb;
}
li {
height: 40px;
line-height: 40px;
}
<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>

Answer 3

Flexbox doesn't work in <fieldset> source.
You can use a <div> instead codepen.
HTML
<div class='fieldset'>
<legend>aHow 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>
</div>
CSS
.fieldset {
min-height: 300px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
ul {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-around;
background-color: #ffffbb;
}
legend {
margin-right: auto;
margin-left: 12px;
margin-top: -10px;
background: #FFF;
}