fieldset ширина 100% от родителя

Question

Мне нужно иметь прокручиваемый div внутри набора полей. Моя проблема заключается в том, что полевое расширение расширяется до его ширины содержимого вместо того, чтобы оставаться с родителем.

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

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

Две коробки должны иметь как полосы прокрутки в нижней части экрана, но верхний находится в FIELDSET, поэтому он не будет контролировать переполнение.

Как получить набор полей только как можно более широкий, чем его родитель?

Answer 1

Браузеры имеют пользовательские CSS в их по умолчанию таблицы стилей для fieldset элементов.

В Chrome имеет min-width: -webkit-min-content;

Вы можете просто установить это правило:

.section fieldset{ 
    min-width: 0; 
} 

См скрипку:

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

Осмотрите элементы с Firebug, Chrome Dev Tools, Асо чтобы увидеть разницу между div и fieldset элементами в y наша таблица стилей!

Answer 2

Просто установите overflow: scroll на родителя .section. Это будет содержать переполнение и добавление полос прокрутки.

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

FIDDLE

Answer 3

от вашего jsfiddle, возможно, вы забыли добавить Fieldset ко второй секции

это быстро исправить

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