fieldset width 100% of parent [duplicate]

Question

This question already has an answer here:

• <fieldset> resizes wrong; appears to have unremovable `min-width: min-content` 4 answers

I need to have a scrollable div inside a fieldset. My problem is that a fieldset expands to it's contents width instead of staying withing its parent.

<div class="section">
    <fieldset>
        <div class="list">
        </div>
    </fieldset>
</div>

http://jsfiddle.net/UziTech/tg5uk25L/

The two boxes should both have scrollbars on the bottom but the top one is in a fieldset so it won't control the overflow.

How do I get the fieldset to only be as wide as it's parent?

Answer 1

Browsers have custom css in their default stylesheet for fieldset elements.

On Chrome it has min-width: -webkit-min-content;

You could just set this rule :

.section fieldset{
    min-width: 0;
}

See fiddle:

http://jsfiddle.net/tg5uk25L/4/

Inspect the elements with Firebug, Chrome Dev Tools, aso to see the difference between the div and the fieldset elements in your stylesheet!

Answer 2

Just set overflow: scroll on the parent .section. That will contain the overflow and add scrollbars.

.section {
  width: 100%;
  border: 10px double;
  box-sizing: border-box;
  overflow: scroll; <----
}

FIDDLE

Answer 3

from your jsfiddle, perhaps you forget to add a fieldset to the second section

this is a quick fix

.section {
    width: 100%;
    border: 10px double;
    box-sizing: border-box;
    overflow-x: auto;
}

td {
    padding: 0 100px;
    border: 1px solid;
}

http://jsfiddle.net/oussamaelgoumri/meqvbjf1/