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

fill-available Experimental: 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 Experimental: O mesmo que max-content.

Sintaxe formal

Error: could not find syntax for this item

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:

<div id="parent">
    <div id="child">
        Child Text
    </div>
</div>

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

Compatibilidade com navegadores

BCD tables only load in the browser