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.

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;
max-width: fill-available;

/* Valores Globais */
max-width: inherit;
max-width: initial;
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.

Valores Keyword

none
A largura não possui valor máximo. (padrão)
max-content This is an experimental API that should not be used in production code.
A max-width intrínseca preferida.
min-content This is an experimental API that should not be used in production code.
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.

fill-available This is an experimental API that should not be used in production code.
A largura contida do bloco sem o margin, border e padding horizontal. (Note que alguns navegadores implementaram um nome antigo para essa keyword, available.)
fit-content This is an experimental API that should not be used in production code.
O mesmo que max-content.

Sintaxe formal

none | (en-US) <length-percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)

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

Exemplos

Definindo a largura máxima em pixels

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

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

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

Resultado

O valor de fit-content pode ser usado para atribuir o comprimento de um elemento no tamanho intrínseco necessário pelo seu conteúdo:

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

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

Preocupações de acessibilidade

Garantir que os elementos atribuidos com max-width não estejam cortados e/ou não obscureça outro conteúdo quando a página é ampliada para aumentar o tamanho do texto. 

Especificações

Especificação Status Comentário
CSS Box Sizing Module Level 3
The definition of 'max-width' in that specification.
Rascunho atual Adiciona o max-content, min-content, fit-content, e fill-available keywords. (Ambos CSS3 Box e CSS3 Writing Modes são rascunhos usados para definir essas keywords, mas foram substituídas por essa especificação.)
CSS Transitions
The definition of 'max-width' in that specification.
Rascunho atual Define max-width como animável.
CSS Level 2 (Revision 1)
The definition of 'max-width' in that specification.
Recomendação Definição inicial.

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();

Compatibilidade com navegador

BCD tables only load in the browser

Veja também