The child fieldset is oversized with a height of 100%

Question

The child fieldset is oversized with a height of 100%

I am attempting to make a fieldset child stretch to 100%, but the child (ul) is too large and causing overflow (getting cut off in my scenario).

Is there a way to stretch the fieldset child to 100% without causing 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>

In case you need it, here's also an external fiddle link: Example in Fiddle.

Edited:

Specifying a specific pixel height is essential. I receive form layouts from a C# Windows application via WebSocket. Each component is positioned absolutely with identical properties as in the C# application - that is, left, top, width, and height.

html css flexbox

Answer 1

Answer №1

Solution

Include the following code in your script:

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 element is given default top and bottom margins by the browser's style sheet.

https://i.sstatic.net/Gntty.png

These added margins, combined with height: 100%, result in overflow.

Even after addressing the overflow problem, item #8 remains close to the container's bottom edge:

https://i.sstatic.net/yC0Dx.png

This issue occurs due to the line-height of the legend contributing to the overall height (demonstration with line-height: 0)

Here are two solutions to address this problem:

Set a specific height for the legend and adjust the ul's height accordingly. For example:
```
legend {
   height: 15px;
}

ul {
   height: calc(100% - 15px);
}
```
demo
Decrease the height of the ul, like so:
```
ul { height: 95%; }
```
demo

Answer 2

Solution

Include the following code in your script:

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 element is given default top and bottom margins by the browser's style sheet.

https://i.sstatic.net/Gntty.png

These added margins, combined with height: 100%, result in overflow.

Even after addressing the overflow problem, item #8 remains close to the container's bottom edge:

https://i.sstatic.net/yC0Dx.png

This issue occurs due to the line-height of the legend contributing to the overall height (demonstration with line-height: 0)

Here are two solutions to address this problem:

Set a specific height for the legend and adjust the ul's height accordingly. For example:
```
legend {
   height: 15px;
}

ul {
   height: calc(100% - 15px);
}
```
demo
Decrease the height of the ul, like so:
```
ul { height: 95%; }
```
demo

Answer 3

Answer №2

To ensure your fields adjust height automatically, include the Auto Height property and for li elements, add Height and Line-height.

Implementing these changes will result in a clear and aesthetically pleasing layout.

UPDATE: Additionally, remember to eliminate the Overflow: hidden; attribute.

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 4

To ensure your fields adjust height automatically, include the Auto Height property and for li elements, add Height and Line-height.

Implementing these changes will result in a clear and aesthetically pleasing layout.

UPDATE: Additionally, remember to eliminate the Overflow: hidden; attribute.

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 5

Answer №3

Flexbox is not supported within the <fieldset> element, as discussed in this source.

Instead, you can utilize a <div> element for similar functionality, demonstrated in this codepen example.

HTML

<div class='fieldset'>
  <legend>How to style child elements</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;
}

Answer 6

Flexbox is not supported within the <fieldset> element, as discussed in this source.

Instead, you can utilize a <div> element for similar functionality, demonstrated in this codepen example.

HTML

<div class='fieldset'>
  <legend>How to style child elements</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;
}

The child fieldset is oversized with a height of 100%

Answer №1

Solution

Explanation

Answer №2

Answer №3

HTML

CSS

Similar questions

What is the best way to redirect to the index page after successfully submitting a new record on the front-end? [Using Rubymine 2020.2.3, Ruby 2.7.2p137, and gem 3.1.2]

What could be causing the partial transparency in my SVG mask?

Using Jquery to find the class that matches the current element

Icon displayed within the input field

Checkbox label covering checkbox

Understanding the flow of block-level elements in documents when utilizing CSS :after pseudo selectors

Unable to find '/images/img-2.jpg' in the directory 'E:React eact-demosrc'

Update the background color of an li element upon clicking

Verify if there are DOM elements located within a DIV container, execute the functions associated with those elements sequentially

Removing an element with a specific class that was created with Javascript can be done by clicking outside the box

What is the process for implementing the Google Analytics tag on a Streamlit-built website?

Troubleshooting: Unable to fetch CSS file in Node.js Express framework

Text cannot be highlighted within DIV element

How to align items at the center in material-ui styling

Using setInterval together with jQuery to animate CSS based on changes in window size

Using attribute value for CSS background-image styling is a handy technique to

Issue with Ref when used in a distinct HTML template

Mysterious Chrome glitch causes SVG element to shift down by 2 pixels

Is there a way to make the edges of this table more curved?

Include a border around the entire tooltip