CSS: “max-width”: “auto” não é um valor de “max-width”.

A propriedade max-width define a largura máxima que um elemento pode crescer, impedindo que o valor computado de width exceda o limite especificado. Embora muitas propriedades de dimensionamento CSS aceitem auto como valor (por exemplo, width: auto e margin: auto são perfeitamente válidos), a propriedade max-width não aceita. Este é um erro comum porque os programadores frequentemente assumem que auto é universalmente aceite em propriedades similares.

Quando um navegador encontra max-width: auto, irá tipicamente ignorar a declaração inválida e usar o valor predefinido de none. Embora a página possa ainda renderizar como esperado em alguns navegadores, depender deste comportamento é pouco fiável e não standard. Escrever CSS válido garante renderização consistente em todos os navegadores e torna as suas folhas de estilo mais fáceis de manter e depurar.

Se a sua intenção é remover uma restrição de largura máxima (efetivamente fazendo com que max-width não tenha efeito), use none — este é o valor predefinido. Se quiser que o elemento se dimensione com base no seu conteúdo, use max-content, min-content, ou fit-content. Se precisar de repor a propriedade para o seu valor inicial, use initial (que resolve para none).

Valores válidos para max-width

A propriedade max-width aceita os seguintes tipos de valores:

• none — Nenhum limite na largura do elemento (o valor predefinido).
• Valores de comprimento — Como 500px, 3.5em, 20rem, 80ch.
• Valores de percentagem — Como 75%, relativos à largura do bloco contentor.
• Valores de palavra-chave — max-content, min-content, fit-content, ou fit-content(<length>).
• Valores globais — inherit, initial, revert, unset.

Exemplos

❌ Incorreto: usar auto com max-width

<div style="max-width: auto;">
  Este contentor tem um valor max-width inválido.
</div>

Isto desencadeia o erro de validação porque auto não é um valor max-width válido.

✅ Corrigido: usar none para remover a restrição

Se não quiser um limite de largura máxima (a intenção mais provável ao escrever auto), use none:

<div style="max-width: none;">
  Este contentor não tem restrição de largura máxima.
</div>

✅ Corrigido: usar um comprimento específico ou percentagem

Se quiser limitar a largura do elemento a um tamanho específico:

<div style="max-width: 600px;">
  Este contentor não irá crescer além de 600 pixéis.
</div>

<div style="max-width: 80%;">
  Este contentor não irá exceder 80% da largura do seu pai.
</div>

✅ Corrigido: usar palavras-chave de dimensionamento intrínseco

Se quiser que a largura máxima do elemento seja baseada no seu conteúdo:

<div style="max-width: max-content;">
  A largura máxima deste contentor é determinada pelo seu conteúdo.
</div>

Saiba mais:

MDN Reference

MDN: CSS max-width

→