ширина набора полей 100% от родительского [дубликат]

На этот вопрос уже есть ответ здесь:

  • изменяет размер неправильно; кажется, что имеет несъемную 'min-width: min-content' 4 ответа

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

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

Http://jsfiddle.net/UziTech/tg5uk25L/

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

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

3 3
html css3 fieldset

3 ответа:

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

На Chrome он имеет min-width: -webkit-min-content;

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

.section fieldset{
    min-width: 0;
}

См. скрипку:

Http://jsfiddle.net/tg5uk25L/4/

Проверьте элементы с помощью Firebug, Chrome Dev Tools, aso, чтобы увидеть разницу между элементами div и fieldset в вашей таблице стилей!
19

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

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

Скрипка

0

Из вашего 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/

0