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

/* <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

A max-width intrínseca preferida.

min-content

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.

Definição formal

Initial valuenone
Aplica-se aall elements but non-replaced inline elements, table rows, and row groups
Inheritednão
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length or none
Animation typea length, percentage or calc();

Sintaxe formal

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

<length-percentage> = 
  <length> (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

<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;
}

Resultado

Especificações

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

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também