Исправляем проблему с размером <fieldset> и <select> в CSS

Быстрый ответ

Чтобы устранить проблему с изменением размера <fieldset>, установите min-width: 0. Это позволит нейтрализовать значение min-content, которое браузер устанавливает по умолчанию:

fieldset {
  min-width: 0; /* Теперь я регулирую ширину */
}

Таким образом, с помощью всего одного CSS-правила, мы заставляем элемент <fieldset> игнорировать встроенные шириновые ограничения.

Как управлять поведением различных браузеров?

Элемент <fieldset> может вести себя по-разному в зависимости от конкретного браузера и ситуации. Вот ваше руководство по управлению поведением этого элемента:

Решение для WebKit и новых версий Firefox:

Следующий код обеспечивает корректную работу в браузерах WebKit и начиная с Firefox версии 53:

fieldset {
  min-width: 0; /* Webkit/Firefox: "Я повинуюсь!" */
}

Подробнее об этом расскажет наш спикер на видео

Решение для старых версий Firefox:

Для старых версий Firefox (до 53) элемент <fieldset> требует специального подхода. Для них поможет изменение значения свойства display:

fieldset {
  display: table-cell; /* Старый Firefox: "Так правильнее." */
}

Однако будьте осторожны: такое изменение может неожиданно повлиять на поведение Internet Explorer. Обязательно проведите обширное тестирование.

Выравнивание элементов <select>:

Если внутри <fieldset> расположен <select>, следует учесть его размеры:

fieldset select {
  max-width: 100%; /* Позволим <select> занимать всё доступное место */
}

Иногда max-width лучше, чем width: 100%;, чтобы предотвратить выпадение <select> из потока.

Классовая стратегия для <select>:

Если <fieldset> содержит несколько элементов <select>, уникальные классы помогут разграничить их:

.select-full-width {
  width: 100%;  /* Полная ширина */
}

.select-max-width {
  max-width: 100%;  /* Максимально возможная ширина */
}

Такие классы помогут поддерживать порядок и структуру в вашем <fieldset>.

Визуализация

Можно представить <fieldset> как специализированный контейнер для ваших элементов:

**Контейнер**             | **Пространство для содержимого**
-------------------------- | ----------------------------------------
Мягкая сумка (div)         | [🧦👖👔]
Чемодан с жёстким каркасом (fieldset) | [🧦👖👔][...🧳...]  // Минимальный объём!

<fieldset>, подобно чемодану с жёстким каркасом, устанавливает минимальный объём, который и определяет значение min-content.

Познание тайн <fieldset>

Понимание особенностей <fieldset> важно для эффективной работы с ним. Вот некоторые рекомендации:

Отладка с помощью инструментов разработчика:

Используйте инструменты разработчика браузера для исследования поведения <fieldset>:

- Кликните правой кнопкой мыши по `<fieldset>`
- Выберите "Исследовать"
- В вкладке "Вычисляемые стили" оцените, как применяются CSS-правила

Эксперименты со свойством display:

Попробуйте для <fieldset> разные значения свойства display:

fieldset {
  display: block;     /* Обычный блочный элемент */
  display: grid;      /* Элемент-сетка */
  display: flex;      /* Flex-элемент */
  display: table-cell;/* Подходит для старых версий Firefox */
}

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

Полезные материалы

1. <fieldset>: Элемент – HTML: HyperText Markup Language | MDN — Детальная документация MDN по <fieldset>.
2. Полное руководство по элементу Table | CSS-Tricks — Исчерпывающее руководство по <table> и связанным с ним стилям.
3. CSS Box Sizing Module Level 3 — Стандарт W3C по использованию min-content.
4. Вопросы · w3c/csswg-drafts · GitHub — Обсуждения и вопросы о min-content на площадке CSSWG.
5. Can I use... Support tables for HTML5, CSS3, etc — Информация о поддержке свойства min-content в различные периоды времени.