fieldset width 100% of parent

Question

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!