max-width

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

Интерактивный пример

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

Синтаксис

css
/* Ключевые слова */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Значения длины */
max-width: 3.5em;

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

/* Глобальные значения */
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.

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

max-width = 
none | (en-US)
<length-percentage [0,∞]> | (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( <length-percentage [0,∞]> )

<length-percentage> =
<length> | (en-US)
<percentage>

Примеры

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

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

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

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

html
<div id="parent">
  <div id="child">Child Text</div>
</div>
css
#parent {
  background: lightblue;
  width: 300px;
}

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

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

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

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

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values
Начальное значениеnone
Применяется квсе элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значенияпроценты, как указаны, абсолютная длина или none
Animation typeдлина, проценты или calc();

Совместимость с браузерами

BCD tables only load in the browser

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