Fieldset child with height 100% is too big

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

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 2

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:

1. 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

2. Reduce the height of the ul, like this:

   ul { height: 95%; }
   

   demo

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