Propiedad CSS max-height

La propiedad max-height establece la altura máxima a la que un elemento puede crecer. El elemento puede ser más corto que este valor, pero nunca será más alto. Si la propiedad height se establece en un valor mayor, max-height la anula y limita el elemento.

Esto es útil cuando tienes contenido de longitud desconocida o variable — un cuadro de comentarios, un panel desplegable, una ventana de chat, una imagen o una tarjeta — y quieres evitar que empuje el resto del diseño. Combina max-height con la propiedad overflow para que el contenido más alto que el límite se desplace en lugar de desbordarse visiblemente.

Esta página cubre la sintaxis, todos los valores aceptados, cómo max-height interactúa con min-height y height, y los patrones más comunes en la práctica.

Cómo se resuelve max-height

Cuando se aplica más de una propiedad relacionada con la altura, el navegador las resuelve en un orden fijo de precedencia:

min-height prevalece sobre max-height que prevalece sobre height

En otras palabras, si estableces height: 100px; max-height: 50px, el elemento se renderiza a 50px (gana max). Pero si también estableces min-height: 80px, el elemento se renderiza a 80px (min gana sobre max). Este orden importa cuando varias reglas colisionan — min-height siempre tiene la última palabra.

Advertencia sobre porcentajes: un max-height en porcentaje se resuelve contra la altura del bloque contenedor. Si ese padre no tiene una altura explícita (su altura es auto), el porcentaje no tiene nada concreto con lo que medirse y max-height se comporta como none.

Valor inicial	none
Se aplica a	Todos los elementos, excepto elementos en línea no reemplazados, columnas de tabla y grupos de columnas.
Heredado	No.
Animable	Sí. La altura es animable.
Versión	CSS2
Sintaxis DOM	object.style.maxHeight = "50px";

Sintaxis

Sintaxis de la propiedad CSS max-height

max-height: none | length | percentage | calc() | max-content | min-content | fit-content | initial | inherit;

Ejemplo con un valor fijo en px

En el ejemplo siguiente, el párrafo tiene un límite de 50px. Como el texto es más largo, overflow: auto añade una barra de desplazamiento para que el contenido sea legible sin romper el diseño.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        max-height: 50px;
        overflow: auto;
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con un valor en cm

Aquí el primer párrafo no tiene límite (max-height: none), mientras que el segundo tiene un límite de 2cm. Esto muestra cómo el mismo contenido se comporta con y sin límite en paralelo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example1 {
        max-height: 2cm;
        overflow: auto;
        border: 1px solid #666;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: none;</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con valores de porcentaje y calc()

Las dos cajas siguientes tienen una height explícita, por lo que los valores de porcentaje y calc() tienen una referencia con la que resolverse. La primera se limita a la mitad de su propia altura; la segunda usa calc() para dejar un margen de 50px por debajo del límite.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .percent-example {
        max-height: 50%;
        overflow: auto;
        border: 1px solid #666;
        height: 200px;
      }
      .calc-example {
        max-height: calc(100% - 50px);
        overflow: auto;
        border: 1px solid #666;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: 50%;</h3>
    <p class="percent-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: calc(100% - 50px);</h3>
    <p class="calc-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
none	Valor predeterminado. No se establece una altura máxima.	Pruébalo »
length	Establece una altura máxima fija en px, pt, cm, etc.	Pruébalo »
percentage	Establece la altura máxima como un porcentaje de la altura del bloque contenedor.	Pruébalo »
calc()	Calcula la altura máxima usando una expresión.	Pruébalo »
max-content	Establece la altura máxima al tamaño intrínseco máximo del contenido.	Pruébalo »
min-content	Establece la altura máxima al tamaño intrínseco mínimo del contenido.	Pruébalo »
fit-content	Establece la altura máxima al tamaño fit-content.	Pruébalo »
initial	Establece esta propiedad a su valor predeterminado.	Pruébalo »
inherit	Hereda esta propiedad de su elemento padre.	Pruébalo »

Casos de uso comunes

Paneles desplazables. Un menú desplegable, una barra lateral o un registro de chat que nunca debe crecer más allá del viewport: establece max-height más overflow-y: auto.
Imágenes responsivas. img { max-height: 80vh; } evita que una imagen alta supere la altura de la pantalla mientras se escala correctamente en viewports pequeños.
Secciones desplegables / "leer más". Anima max-height de un valor pequeño a uno mayor para revelar contenido oculto con una transición CSS (animar max-height funciona donde animar height: auto no lo hace).
Tarjetas de altura uniforme. Limitar max-height en los cuerpos de las tarjetas evita que una celda descontrolada arruine una cuadrícula de tarjetas.

Consejos y advertencias

max-height solo establece un techo — no fuerza a un elemento a tener esa altura. Usa height o min-height para eso.
Sin un valor de overflow, el contenido más alto que max-height simplemente se desborda de la caja. Añade overflow: auto (desplazamiento) u overflow: hidden (recorte) para controlarlo.
Un max-height en porcentaje requiere que el padre tenga una altura resuelta; de lo contrario, se ignora.
Recuerda que border y padding cuentan en la caja a menos que establezcas box-sizing; el valor predeterminado content-box mide max-height solo contra el área de contenido.
Existe una propiedad equivalente para el ancho: consulta max-width.

Práctica

¿Cuál es la función de la propiedad 'max-height' en CSS?

Establece la altura máxima de un elemento.Establece la altura mínima de un elemento.Limita el ancho de un elemento.Garantiza que la altura de un elemento no supere un valor determinado.Restablece la altura de un elemento a 'auto'.