Свойство 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
Внутренняя предпочтительная ширина.
min-content
Внутренняя минимальная ширина.
fill-available
Ширина родительского блока минус горизонтальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)
fit-content
Определяет как min(max-content, max(min-content, fill-available)).

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

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

Примеры

table { min-width: 75%; }

form { min-width: 0; }

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

Спецификация Статус Комментарий
CSS Intrinsic & Extrinsic 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();
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
min-widthChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.
IE Полная поддержка 7Opera Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания CSS 2.1 leaves the behavior of min-width with table undefined. Opera supports applying min-width to table elements.
Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android ?
max-contentChrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Нет поддержки НетFirefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 15
С префиксом
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 46Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 5.0
min-contentChrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 25
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
Edge Нет поддержки НетFirefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 46Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS ? Samsung Internet Android Полная поддержка 5.0
stretch
Экспериментальная
Chrome Полная поддержка 22
Альтернативное имя
Полная поддержка 22
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Полная поддержка 4.4
Альтернативное имя
Полная поддержка 4.4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Chrome Android Полная поддержка 25
Альтернативное имя
Полная поддержка 25
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android ? Safari iOS ? Samsung Internet Android ?
fit-contentChrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Нет поддержки НетFirefox Полная поддержка 3
С префиксом Замечания
Полная поддержка 3
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
IE Нет поддержки НетOpera Полная поддержка 15
С префиксом
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка Да
Полная поддержка Да
Полная поддержка 6.1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 46Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 4
С префиксом Замечания
Полная поддержка 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 5.0
Альтернативное имя
Полная поддержка 5.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
autoChrome Полная поддержка 21
Замечания
Полная поддержка 21
Замечания
Замечания Chrome uses auto as the initial value for min-width.
Edge Полная поддержка 12
Замечания
Полная поддержка 12
Замечания
Замечания Edge uses auto as the initial value for min-width.
Firefox Полная поддержка 34
Полная поддержка 34
Нет поддержки 16 — 22
Замечания
Замечания Firefox 18 and later (until the value was removed), used auto as the initial value for min-width.
IE Нет поддержки НетOpera Полная поддержка 12.1
Замечания
Полная поддержка 12.1
Замечания
Замечания Opera uses auto as the initial value for min-width.
Safari Нет поддержки НетWebView Android Полная поддержка 37
Замечания
Полная поддержка 37
Замечания
Замечания Chrome uses auto as the initial value for min-width.
Chrome Android Полная поддержка 25
Замечания
Полная поддержка 25
Замечания
Замечания Chrome uses auto as the initial value for min-width.
Edge Mobile ? Firefox Android Полная поддержка 34
Полная поддержка 34
Нет поддержки 16 — 22
Замечания
Замечания Firefox 18 and later (until the value was removed), used auto as the initial value for min-width.
Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

See also

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Kikubaaqudgha
Обновлялась последний раз: mdnwebdocs-bot,