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` не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Спецификации
------------

| 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 with JavaScript enabled. Enable JavaScript to view data.

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

* `width`, `min-width`, `max-height`
* Блочная модель (en-US), `box-sizing`