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.

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

none | (en-US) <length-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>

Примеры

В этом примере, "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 Box 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();

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

BCD tables only load in the browser

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