Overflow de caja

En el Box Model aprendiste que cada elemento tiene un área de contenido, padding, border y margin. Pero ¿qué pasa cuando el contenido es demasiado grande para entrar en esa área?

Para que haya overflow, el contenedor necesita tener un tamaño fijo — si no hay height, max-height, width o max-width definidos, el contenedor simplemente crece para acomodar el contenido y el overflow nunca ocurre.

---

El comportamiento por defecto: visible

El valor inicial de overflow es visible: el contenido que no entra en la caja se muestra de todos modos, fuera de sus límites. El contenedor no crece, pero el contenido “se sale” y puede superponerse con otros elementos.

.panel {
  width: 300px;
  height: 100px;        /* tamaño fijo: requisito para el overflow */
  background: #e2e8f0;
  padding: 12px;
  /* sin overflow → default "visible": el texto se sale de la caja */
}

---

Los cuatro valores de overflow

Valor	Comportamiento	Cuándo usarlo
visible	Default. El contenido desborda y se ve fuera de la caja.	Cuando el desbordamiento es intencional (tooltips, badges).
hidden	Recorta el contenido que desborda. Sin scrollbar. El contenido existe pero no se ve.	Cuando querés ocultar el exceso visualmente.
scroll	Siempre muestra barras de scroll, aunque el contenido no desborde.	Rara vez — cuando necesitás que el espacio de scrollbar esté reservado para evitar saltos de layout.
auto	Muestra barras de scroll solo cuando el contenido desborda.	El más recomendado para paneles scrolleables: limpio cuando no hay overflow, scrolleable cuando sí.

Diferencia clave entre scroll y auto: scroll pinta las barras siempre, aunque el contenido quepa. auto las muestra solo cuando hay desbordamiento real.

/* Recorta el exceso — no hay scroll */
.panel-hidden {
  height: 150px;
  overflow: hidden;
}

/* Barras de scroll solo si hay overflow — el más usado en práctica */
.panel-auto {
  height: 150px;
  overflow: auto;
}

---

overflow-x y overflow-y por separado

overflow es un shorthand que controla ambos ejes a la vez. Si necesitás comportamientos distintos por eje — por ejemplo, recortar el desbordamiento horizontal pero permitir scroll vertical — usás overflow-x y overflow-y individualmente.

/* Solo scroll vertical — el contenido horizontal se recorta */
.panel {
  height: 200px;
  overflow-x: hidden;   /* recorta el eje horizontal */
  overflow-y: auto;     /* scroll vertical solo si hace falta */
}

Comportamiento a conocer: si un eje es visible y el otro no lo es, el eje con visible computa como auto. Si declarás overflow-x: hidden; overflow-y: visible, el overflow-y terminará siendo auto por la spec CSS.

---

Tu turno: en el sandbox, aplicá el overflow correcto a cada panel y verificá con “Comprobar”.

Nota sobre el motor: el validador comprueba los valores computados de overflow, overflow-x y overflow-y con getComputedStyle. Los efectos visuales — que el scroll sea visible, que el contenido esté recortado — solo se ven en el preview.