Makla Makla - 2 months ago 7
HTML Question

Fieldset child with height 100% is too big

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

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.

enter image description here

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:

enter image description here

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