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

A propriedade **`max-width`** do CSS estabelece a largura máxima de um elemento. Ele evita que o valor usado da propriedade `width` se torne maior que o valor especificado por `max-width`.

Experimente
-----------

`max-width` substitui `width`, mas `min-width` (en-US) substitui `max-width`.

Sintaxe
-------


```css
/\* <length> valor \*/
max-width: 3.5em;

/\* <porcentagem> valor \*/
max-width: 75%;

/\* Valores de keyword \*/
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);

/\* Valores Globais \*/
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: revert-layer;
max-width: unset;
```

### Valores

`<length>` (en-US)

Define a `max-width` como um valor absoluto.

`<percentage>` (en-US)

Define a `max-width` como uma porcentagem da largura do bloco que o contém.

`none`

A largura não possui valor máximo. (padrão)

`max-content` 
Experimental

A `max-width` intrínseca preferida.

`min-content` 
Experimental

O mínimo `max-width` intrínseco.

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

Use a fórmula `fit-content` com o espaço disponível substituído pelo argumento especificado, i.e. `min(max-content, max(min-content, argumento)).`

Preocupações de Acessibilidade
------------------------------

Certifique-se que os elementos definidos com `max-width` não sejam truncados e/ou não obscureçam outros conteúdos quando a página for ampliada para aumentar o tamanho do texto.

* MDN Understanding WCAG, explicações da Diretriz 1.4 (en-US)
* Compreender o Critério de Sucesso 1.4.4 | W3C Entendendo as WCAG 2.0
Definição formal
----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

Sintaxe formal
--------------
```

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)      | (en-US)  
  <percentage> (en-US)    
  
```

Exemplos
--------

### Definindo a largura máxima em pixels

Neste exemplo, o "child" terá 150 pixels de largura ou a largura do "parent", o que for menor:

#### HTML


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


#### CSS


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

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


#### Resultado

Especificações
--------------

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

Compatibilidade com navegadores
-------------------------------

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

Veja também
-----------

* O box model, `box-sizing`
* `width`, `min-width` (en-US)
* The mapped logical properties: `max-inline-size` (en-US), `max-block-size` (en-US)