CSS: “max-width”: “auto” no es un valor válido para “max-width”.

La propiedad max-width establece el ancho máximo al que un elemento puede crecer, evitando que el valor calculado de width exceda el límite especificado. Aunque muchas propiedades CSS de dimensionamiento aceptan auto como valor (por ejemplo, width: auto y margin: auto son perfectamente válidos), la propiedad max-width no lo hace. Este es un error común porque los desarrolladores a menudo asumen que auto es universalmente aceptado en propiedades similares.

Cuando un navegador encuentra max-width: auto, típicamente ignorará la declaración inválida y volverá al valor predeterminado de none. Aunque la página puede seguir renderizándose como se espera en algunos navegadores, confiar en este comportamiento no es confiable y no es estándar. Escribir CSS válido asegura un renderizado consistente en todos los navegadores y hace que tus hojas de estilo sean más fáciles de mantener y depurar.

Si tu intención es eliminar una restricción de ancho máximo (efectivamente hacer que max-width no tenga efecto), usa none — este es el valor predeterminado. Si quieres que el elemento se dimensione basándose en su contenido, usa max-content, min-content, o fit-content. Si necesitas resetear la propiedad a su valor inicial, usa initial (que se resuelve a none).

Valores válidos para max-width

La propiedad max-width acepta los siguientes tipos de valores:

• none — Sin límite en el ancho del elemento (el valor predeterminado).
• Valores de longitud — Como 500px, 3.5em, 20rem, 80ch.
• Valores de porcentaje — Como 75%, relativo al ancho del bloque contenedor.
• Valores de palabra clave — max-content, min-content, fit-content, o fit-content(<length>).
• Valores globales — inherit, initial, revert, unset.

Ejemplos

❌ Incorrecto: usar auto con max-width

<div style="max-width: auto;">
  Este contenedor tiene un valor max-width inválido.
</div>

Esto provoca el error de validación porque auto no es un valor válido para max-width.

✅ Corregido: usar none para eliminar la restricción

Si no quieres límite de ancho máximo (la intención más probable al escribir auto), usa none:

<div style="max-width: none;">
  Este contenedor no tiene restricción de ancho máximo.
</div>

✅ Corregido: usar una longitud específica o porcentaje

Si quieres limitar el ancho del elemento a un tamaño específico:

<div style="max-width: 600px;">
  Este contenedor no crecerá más allá de 600 píxeles.
</div>

<div style="max-width: 80%;">
  Este contenedor no excederá el 80% del ancho de su padre.
</div>

✅ Corregido: usar palabras clave de dimensionamiento intrínseco

Si quieres que el ancho máximo del elemento se base en su contenido:

<div style="max-width: max-content;">
  El ancho máximo de este contenedor está determinado por su contenido.
</div>

Más información:

MDN Reference

MDN: CSS max-width

→