max-width

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

max-width перекрывает width, но min-width перекрывает max-width.

Синтаксис

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

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

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

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

Значения

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

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

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

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

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

Примеры

В этом примере, "child" будет иметь ширину 150 пикселей или ширину "parent", в зависимости от того, что меньше:

<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

Значение fit-content можно использовать для установки ширины элемента на основе внутреннего размера, требуемого его содержимым:

#parent {
  background: lightblue;
  width: 300px;
}

#child  {
  background: gold;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: -webkit-fit-content;
}

Проблемы доступности

Убедитесь, что элементы с max-width не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. 

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

Спецификация Статус Комментарий
CSS Intrinsic & Extrinsic Sizing Module Level 3
Определение 'max-width' в этой спецификации.
Рабочий черновик Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией)
CSS Transitions
Определение 'max-width' в этой спецификации.
Рабочий черновик Определяет max-width как анимируемое.
CSS Level 2 (Revision 1)
Определение 'max-width' в этой спецификации.
Рекомендация Первоначальное определение.
Начальное значениеnone
Применяется квсе элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк
Наследуетсянет
Процентыссылается на ширину содержащего блока
Отображениевизуальный
Обработка значенияпроценты, как указаны, абсолютная длина или none
Animation typeдлина, проценты или calc();
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
max-widthChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания CSS 2.1 leaves the behavior of max-width with table undefined. Firefox supports applying max-width to table elements.
IE Полная поддержка 7Opera Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания CSS 2.1 leaves the behavior of max-width with table undefined. Opera supports applying max-width to table elements.
Safari Полная поддержка 1WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания CSS 2.1 leaves the behavior of max-width with table undefined. Firefox supports applying max-width to table elements.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
fit-content
Экспериментальная
Chrome Полная поддержка 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 Полная поддержка 44Safari Полная поддержка 6.1
С префиксом
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 46Firefox 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 Полная поддержка 43Safari iOS Полная поддержка 7
С префиксом
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Samsung Internet Android Полная поддержка 5.0
max-content
Экспериментальная
Chrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 22
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Нет поддержки НетFirefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 6.1
С префиксом
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 7
С префиксом
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Samsung Internet Android Полная поддержка 5.0
min-content
Экспериментальная
Chrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Нет поддержки НетFirefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 6.1
С префиксом
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 7
С префиксом
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Samsung Internet Android Полная поддержка 5.0
stretch
Экспериментальная
Chrome Полная поддержка 22
Альтернативное имя
Полная поддержка 22
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Полная поддержка 15
Альтернативное имя
Полная поддержка 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari Нет поддержки НетWebView Android Полная поддержка 4.4
Альтернативное имя
Полная поддержка 4.4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Chrome Android Полная поддержка 25
Альтернативное имя
Полная поддержка 25
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Firefox Android Нет поддержки НетOpera Android Полная поддержка 14
Альтернативное имя
Полная поддержка 14
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

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

Смотрите также