CODEWITHSUNDEEP
htmlcssoverflow
Charlie Unfricht
Charlie Unfricht

Reputation: 88

css - div overflowing outside of fieldset parent

jsFiddle: https://jsfiddle.net/0q3ega2n/

I'm currently at a bit of a loss. I have a fieldset that has a select box in its legend and is meant to dynamically update the content within my fieldset, which works fine. For layout purposes, the fieldsets are fixed at a height of 200px.

Where I'm running into issues is adding scrollbars to the fieldsets in the event the content overflows. I can't use an overflow: auto on the fieldset itself, because that causes the legend tag to scroll as well. Some other answers suggested using a content wrapper div to add the scrollbars, which I've done.

However I'm still not quite where I want. I need to specify a height attribute for the wrapper div in order for the overflow to occur. Setting it to 100% results in text still overflowing outside the box (albeit not as much as it does with no overflow set). Setting it to 92% is pretty much exactly what I want but 92% was chosen arbitrarily and as a result doesn't feel right (plus I'm slightly concerned about cross-browser compatibility)

CSS:

* {
  font: 12pt Verdana;
}

fieldset.metrics {
  height: 200px;
}

div.metrics-wrapper {
  width: 100%;
  height: 92%;
  overflow: auto;
}

HTML:

<fieldset class='metrics'>
  <legend>
    Fieldset Title, with a
    <select>
      <option selected='selected'>select box</option>
    </select>
  </legend>
  <div class='metrics-wrapper'>
    <p>
      Content goes here
    </p>
  </div>
</fieldset>

Upvotes: 0

Views: 1588

Answers (1)

Shane Abram Mendez
Shane Abram Mendez

Reputation: 415

The metrics-wrapper is still overflowing metrics adding overflow: hidden fixes it

fieldset.metrics {
  height: 200px;
  overflow: hidden;
}

Upvotes: 1

Related Questions