overflow

overflow es la propiedad que define qué hace el navegador cuando el contenido de un elemento es más grande que el área disponible de su caja. El desbordamiento ocurre cuando se fija un tamaño al contenedor (con width, height, max-height, etc.) y el contenido interno — texto, imágenes, hijos — supera ese límite. Sin un tamaño fijo, el contenedor simplemente crece para acomodar el contenido y no hay overflow: es una condición necesaria para que la propiedad tenga efecto.

El valor por defecto, visible, hace que el contenido se muestre fuera de los límites de la caja sin alterar el layout — el contenedor no crece, pero el contenido “se sale” y puede superponerse con otros elementos. Eso suele ser un bug, pero también puede ser intencional: tooltips y badges que sobresalen de su contenedor usan este comportamiento. Los otros valores recortan el desbordamiento (hidden), agregan barras de scroll siempre (scroll), o las agregan solo cuando hacen falta (auto).

Además de controlar la visibilidad del contenido que desborda, overflow distinto de visible tiene un efecto secundario importante: crea un nuevo block formatting context (BFC). Eso significa que los márgenes de los hijos no colapsan con los del padre, y que los floats internos quedan contenidos dentro del elemento. Muchos usos de overflow: hidden en código legacy aprovechan este efecto secundario para “clearear” floats.

Cómo funciona

Para que haya overflow, el contenedor necesita tener un tamaño fijo en el eje correspondiente. Sin height (ni max-height), el contenedor crece en vertical para acomodar cualquier cantidad de contenido — no hay overflow vertical posible. Sin width en un elemento block, el contenedor ocupa el 100% del padre — tampoco hay overflow horizontal. El overflow aparece cuando el contenido supera el tamaño fijado.

Una vez que hay overflow, overflow define su manejo. La propiedad es un shorthand que controla simultáneamente los dos ejes (overflow-x y overflow-y). Cuando se declara un solo valor, aplica a ambos ejes. Cuando se necesitan comportamientos distintos por eje, se usan overflow-x y overflow-y individualmente (ver más abajo).

Sintaxis

.panel {
  overflow: hidden;
}

/* shorthand de dos valores: primero x, después y */
.panel {
  overflow: hidden auto;
}

Valores

visible (valor por defecto)

El contenido que excede los límites de la caja se muestra de todos modos, fuera de sus bordes. El contenedor no crece, no aparece ningún scrollbar y el contenido puede superponerse con otros elementos del layout.

Este comportamiento puede parecer un bug, pero tiene usos válidos: tooltips, badges y menús desplegables que deben “salir” de su contenedor padre usan overflow: visible intencionalmente. El problema aparece cuando ocurre de forma no intencional.

.caja {
  width: 200px;
  height: 80px;
  /* sin overflow declarado → visible por defecto */
  /* el texto extra "se sale" de los 80px */
}

hidden

Recorta todo el contenido que queda fuera de los límites de la caja. El contenido existe en el DOM pero no se muestra; no hay scrollbar. El usuario no puede acceder al contenido recortado.

Es el valor correcto para: ocultar el desbordamiento visual intencional, implementar efectos de clip/recorte en tarjetas con imágenes, y — en código legacy — contener floats internos mediante el BFC que crea.

.tarjeta {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  /* la imagen del fondo queda recortada por el border-radius */
}

scroll

Siempre muestra barras de scroll, aunque el contenido quepa perfectamente en la caja. Reserva el espacio de los scrollbars en el layout desde el inicio, evitando que el layout salte cuando el contenido cambia dinámicamente y el scrollbar aparece o desaparece.

En la práctica se usa poco, salvo cuando el salto de layout al aparecer/desaparecer el scrollbar es un problema concreto (por ejemplo, en dashboards con contenido que cambia de tamaño frecuentemente).

.panel-estable {
  height: 400px;
  overflow: scroll;
  /* scrollbar siempre reservado — el layout no salta */
}

auto

Muestra barras de scroll solo cuando el contenido realmente desborda. Si el contenido cabe, no hay scrollbar — la caja se ve limpia. Cuando el contenido supera el tamaño, el scrollbar aparece.

Es el valor más recomendado para paneles scrolleables: se comporta limpiamente con contenido corto y de forma funcional con contenido largo.

.panel-lista {
  height: 300px;
  overflow: auto;
  /* sin scroll si el contenido cabe; con scroll si desborda */
}

Diferencia clave scroll vs auto: scroll siempre reserva y muestra el espacio para el scrollbar; auto lo hace solo cuando hay desbordamiento real.

overflow-x y overflow-y — control por eje

overflow es un shorthand que controla los dos ejes. Para comportamientos distintos en cada eje, se usan las subpropiedades individuales:

.panel {
  height: 300px;
  overflow-x: hidden;   /* recorta el desbordamiento horizontal */
  overflow-y: auto;     /* scroll vertical solo si hace falta */
}

Gotcha importante: si uno de los ejes tiene visible y el otro no, el eje con visible se computa como auto según la especificación CSS. Es decir, no podés tener overflow-x: hidden y overflow-y: visible al mismo tiempo — el visible se convierte en auto. Si necesitás que un eje sea visible, el otro también debe serlo.

/* Esto NO produce overflow-y: visible */
.panel {
  overflow-x: hidden;
  overflow-y: visible; /* → computa como auto */
}

Los valores de overflow-x y overflow-y se heredan del shorthand:

overflow: hidden;           /* → overflow-x: hidden; overflow-y: hidden */
overflow: hidden auto;      /* → overflow-x: hidden; overflow-y: auto */
overflow: auto;             /* → overflow-x: auto; overflow-y: auto */

Ejemplo realista: panel de lista scrolleable

.sidebar {
  width: 280px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
}

<aside class="sidebar">
  <p>Ítem 1</p>
  <p>Ítem 2</p>
  <!-- muchos ítems más -->
</aside>

Patrón de truncado con ellipsis

Un caso de uso específico de overflow: hidden que aparece frecuentemente es el truncado de texto con puntos suspensivos. Cuando un texto es más largo de lo que cabe en su contenedor y querés mostrar … al final en lugar de recortar abruptamente, necesitás tres propiedades trabajando en conjunto — la llamada “tríada ellipsis”:

.titulo-tarjeta {
  width: 250px;              /* o max-width — necesita ancho fijo */
  white-space: nowrap;       /* 1. fuerza el texto a una sola línea */
  overflow: hidden;          /* 2. recorta el texto que desborda */
  text-overflow: ellipsis;   /* 3. muestra "…" donde cortó */
}

Las tres propiedades son obligatorias. Sin white-space: nowrap, el texto se envuelve en múltiples líneas y nunca desborda horizontalmente, así que text-overflow no actúa. Sin overflow: hidden, el texto desborda pero se muestra completo. text-overflow: ellipsis por sí sola no hace nada — solo actúa cuando ya existe un recorte de overflow.

white-space y text-overflow son propiedades de tipografía que se desarrollan en su propia familia — ver tipografía CSS (próximamente). overflow: hidden es el componente de esta entrada que une la tríada.

Cuándo usar qué

Notas, gotchas e interacción

• overflow: hidden crea un BFC. Cualquier valor distinto de visible crea un nuevo block formatting context. Esto contiene los floats internos (clearfix clásico) y evita el colapso de margins entre hijos y padre. En código moderno es mejor usar Flexbox/Grid para layouts, pero es útil entender por qué tanto código legacy usa overflow: hidden en contenedores.
• El desbordamiento requiere tamaño fijo. Sin height o max-height, el contenedor crece y no hay overflow vertical. Sin width fijo en un elemento block, no hay overflow horizontal. overflow no tiene efecto si el contenedor no tiene una dimensión fija que el contenido pueda superar.
• overflow-x y overflow-y se afectan mutuamente: si uno es visible y el otro no, el visible computa como auto. Es un comportamiento definido en la especificación, no un bug, pero puede sorprender.
• overflow: hidden recorta sombras y outlines. Si un elemento hijo tiene box-shadow o outline que se extiende fuera del contenedor, overflow: hidden lo recorta. Hay que tener en cuenta el área de clipping al usar estos efectos decorativos.
• Interacción con position: absolute: un elemento con position: absolute dentro de un contenedor con overflow: hidden queda recortado por los bordes del contenedor. Si querés que el elemento absoluto salga del contenedor sin recortarse, el padre no debe tener overflow distinto de visible.
• Cicatriz del sandbox: el sandbox inyecta *{box-sizing:border-box} globalmente (docs/CICATRICES.md A.1.7). Eso no afecta a overflow, pero sí a cómo se calcula el height cuando hay padding involucrado.

Vigente / legacy

overflow, overflow-x y overflow-y están vigentes y son ampliamente soportados. Los cuatro valores (visible, hidden, scroll, auto) son universales.

La notación de dos valores del shorthand (overflow: hidden auto) fue añadida más tarde y tiene soporte amplio en navegadores modernos. En código que deba soportar navegadores muy viejos, preferí declarar overflow-x y overflow-y por separado.

Aprendelo en el recorrido

Esta propiedad se practica en el módulo Overflow del recorrido.