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 (en-US) substitui max-width.

<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

max-width = 
  none                                |
  <length-percentage>                 |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

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

Exemplos

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

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

• width, min-width (en-US), max-height (en-US)
• The box model, box-sizing