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

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

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

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

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

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


html css fieldset
person Tony Brix    schedule 26.12.2014    source источник

Ответы (3)


arrow_upward
37
arrow_downward

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

В Chrome это min-width: -webkit-min-content;

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

.section fieldset{
    min-width: 0;
}

Смотрите скрипку:

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

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

person Armel Larcier    schedule 26.12.2014
comment
Спасибо. Я думал, что это может быть что-то вроде этого, но я не смотрел на нужную собственность. - person Tony Brix; 26.12.2014
comment
К сожалению, это не помогает Firefox... - person Alexis Wilke; 29.04.2017
comment
Я думал, что width всегда важнее min-width и max-width. Хорошо знать. - person Sablefoste; 12.12.2017
comment
Наборы полей могут быть опасны. - person Tool; 23.06.2019
comment
как исправить тупой firefox? - person Adaptabi; 09.11.2020
comment
@Adaptabi проверит элемент, вы увидите стили таблицы стилей браузера по умолчанию, примененные к элементу, и он даст вам необходимые подсказки. - person Armel Larcier; 09.11.2020
comment
Хороший хак для решения этой проблемы с ошибками;) - person java acm; 05.03.2021
comment
Это спасательный материал. - person Andy Hoffman; 20.06.2021

arrow_upward
0
arrow_downward

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

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

FIDDLE

person jmore009    schedule 26.12.2014
comment
Я хочу, чтобы набор полей был шириной 100% от его родителя. Я не хочу, чтобы он прокручивался. Я хочу, чтобы div внутри набора полей прокручивался. - person Tony Brix; 26.12.2014

arrow_upward
0
arrow_downward

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

person Oussama Elgoumri    schedule 26.12.2014
comment
Я специально сделал это, чтобы показать, что он работает с div, но не с набором полей. - person Tony Brix; 26.12.2014