min-width

Свойство CSS min-width устанавливает минимальную ширину элемента. Оно предотвращает используемое значение свойства width  от становления меньше, чем значение, указанное для min-width.

Ширина элемента принимает значение min-width когда min-width больше чем max-width или width.

Синтаксис

/* <length> значение */
min-width: 3.5em;

/* <percentage> значение */
min-width: 10%;

/* Значения-ключевые слова */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Глобальные значения */
min-width: inherit;
min-width: initial;
min-width: unset;

Значения

<length>
Минимальная ширина выражается как <length>. Отрицательные значения делают свойство недействительным.
<percentage>
Минимальная ширина выражается как <percentage> от ширины родительского блока. Отрицательные значения делают свойство недействительным.

Значения-ключевые слова

auto
Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content Это экспериментальное API, которое не должно использоваться в рабочем коде.
Внутренняя предпочтительная ширина.
min-content Это экспериментальное API, которое не должно использоваться в рабочем коде.
Внутренняя минимальная ширина.
fill-available Это экспериментальное API, которое не должно использоваться в рабочем коде.
Ширина родительского блока минус горизонтальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
fit-content Это экспериментальное API, которое не должно использоваться в рабочем коде.
Определяет как min(max-content, max(min-content, fill-available)).

Формальный синтаксис

auto | (en-US) <length> | (en-US) <percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)

где
<length-percentage> = <length> | (en-US) <percentage>

Примеры

table { min-width: 75%; }

form { min-width: 0; }

Спецификации

Спецификация Статус Комментарий
CSS Box Sizing Module Level 3
Определение 'min-width' в этой спецификации.
Рабочий черновик Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
CSS Flexible Box Layout Module
Определение 'min-width' в этой спецификации.
Кандидат в рекомендации Добавляет ключевое слово auto и использует как значение по умолчанию.
CSS Transitions
Определение 'min-width' в этой спецификации.
Рабочий черновик Определяет min-width как анимируемое.
CSS Level 2 (Revision 1)
Определение 'min-width' в этой спецификации.
Рекомендация Первоначальное определение.

Начальное значениеauto
Применяется квсе элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значенияпроцент, как указан, или аблосютная длина
Animation typeдлина, проценты или calc();

Поддержка браузерами

BCD tables only load in the browser

See also