Field width 100% of parent

Question

I need to have a scrollable div inside a set of fields. My problem is that fieldset extends its content width instead of staying with the parent.

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

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

Two boxes should have scrollbars at the bottom, and the top one in the set of fields, so it will not control overflow.

How to get a set of fields only as wide as its parent?

Answer 1

Browsers have custom CSS in the default stylesheet for elements fieldset.

In Chrome, it has min-width: -webkit-min-content;

You can simply set this rule:

.section fieldset{
    min-width: 0;
}

See the script:

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

Firebug, Chrome Dev Tools, div fieldset !

Answer 2

overflow: scroll .section. .

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

FIDDLE

Answer 3

jsfiddle, ,

.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/