max-width

O código dos exemplos interativos está armazenado em um repositório GitHub. Se você gostaria de contribuir com o projeto exemplos interativos, por favor clone https://github.com/mdn/interactive-examples e nos envie um pull request.

max-width substitui width, mas min-width substitui max-width.

Sintaxe

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

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

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

A largura máxima, expressada como <length>.

<percentage>

A largura máxima, expressada como <percentage> da largura contida do bloco.

Keyword values

none

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

max-content

A largura intríseca preferida.

min-content

A largura intríseca mínima preferida.

fill-available

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

O mesmo que max-content.

Sintaxe formal

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
where 
<length-percentage> = <length> | <percentage>

Exemplos

Neste exemplo, a cada "child" terá 150 pixels de largura ou comprimento do "parent," não importa qual é menor:

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

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

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

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. 

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0

Especificações

Compatibilidade com navegador

Veja também

• width, min-width, max-height
• The box model, box-sizing