max-width
=========

La propriété CSS **`max-width`** est utilisée pour définir la largeur maximale d'un élément. Elle empêche la valeur utilisée de la propriété `width` de devenir supérieure à la valeur spécifiée par `max-width`.

Exemple interactif
------------------

La valeur de `max-width` surcharge la valeur de `width`, mais `max-width` est, elle, surchargée par `min-width`.

Syntaxe
-------


```css
/\* Valeur de longueur \*/
/\* Type <length> \*/
max-width: 3.5em;

/\* Valeurs relatives \*/
/\* Type <percentage> \*/
max-width: 75%;

/\* Valeurs avec un mot-clé \*/
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);

/\* Valeurs globales \*/
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: revert-layer;
max-width: unset;
```

### Valeurs

`<length>`

Définit la largeur maximale avec une valeur absolue.

`<percentage>`

Définit la largeur maximale avec une valeur relative à la largeur du bloc englobant.

`fit-content(<length-percentage>)`

Utilise la formule `fit-content` avec l'espace disponible remplacé par l'argument fourni, c'est-à-dire `min(max-content, max(min-content, argument))`.

`max-content` 
Expérimental

La largeur maximale intrinsèque préférée.

`min-content` 
Expérimental

La valeur minimale intrinsèque pour la largeur maximale.

`none`

Il n'y a pas de maximum pour la largeur.

Accessibilité
-------------

Veiller à s'assurer que les éléments ciblés avec une règle utilisant `max-width` ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.

* Comprendre les règles WCAG 1.4
* *Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0* (en anglais)
Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments sauf les éléments en ligne non remplacés, les lignes de tableaux et les groupes de lignes |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage comme spécifié ou la longueur absolue ou le mot-clé `none` |
| Type d'animation | une longueur, pourcentage ou calc() ; |

Syntaxe formelle
----------------
```

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

Exemples
--------

### Définir une largeur maximale en pixels

Dans cet exemple, l'élément `enfant` aura la largeur la plus petite entre 150 et celle de l'élément `parent`.

#### HTML


```html
<div id="parent">
  <div id="enfant">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
```


#### CSS


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

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


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le modèle de boîtes (en-US) et `box-sizing`
* `width`, `min-width`
* Les propriétés logiques correspondantes `max-block-size` et `max-inline-size`