¿Cómo puedo controlar el desbordamiento de contenido (overflow) en un elemento CSS?

La propiedad overflow en CSS se utiliza para controlar qué sucede cuando el contenido de un elemento de bloque (block-level element) es demasiado grande para caber dentro de las dimensiones especificadas para ese elemento (es decir, su width y height). Permite gestionar el desbordamiento de contenido.

Los valores más comunes y útiles de la propiedad overflow son:

1. visible (valor por defecto):
   • Si el contenido excede las dimensiones del elemento, este se renderiza fuera de los límites del elemento. El contenido desbordante no se recorta y puede superponerse a otros elementos en la página, lo que a menudo rompe el diseño.
2. hidden:
   • El contenido que desborda se recorta y no es visible fuera de los límites del elemento. No se proporcionan barras de desplazamiento para acceder al contenido oculto.
3. scroll:
   • El contenido que desborda también se recorta, pero el navegador muestra siempre barras de desplazamiento (tanto horizontal como vertical, o solo en la dirección que desborda según el navegador y sistema operativo) para permitir al usuario ver el resto del contenido. Las barras de desplazamiento aparecen incluso si el contenido no desborda realmente en una o ambas direcciones.
4. auto:
   • Este valor es similar a scroll, ya que el contenido que desborda se recorta. Sin embargo, las barras de desplazamiento solo aparecen si el contenido realmente desborda y son necesarias en la dirección del desbordamiento. Si el contenido cabe perfectamente, no se mostrarán barras. Esta es a menudo la opción preferida cuando se desea un scroll condicional.

Propiedades específicas por eje:

También puedes controlar el desbordamiento de forma independiente para el eje horizontal y el vertical utilizando:

• overflow-x: Controla el desbordamiento en el eje horizontal (izquierda/derecha).
• overflow-y: Controla el desbordamiento en el eje vertical (arriba/abajo). Ambas aceptan los mismos valores: visible, hidden, scroll, auto.

Ejemplo:

.mi-caja-texto {
  width: 300px;  /* Ancho fijo */
  height: 150px; /* Alto fijo */
  border: 1px solid #ccc;
  padding: 10px;

  /* Prueba cambiando 'auto' por 'hidden', 'scroll', o 'visible' */
  overflow: auto;
}Lenguaje del código: PHP (php)

<div class="mi-caja-texto">
  Este es un párrafo de texto muy largo que probablemente excederá
  los 150px de altura de esta caja. Gracias a 'overflow: auto;',
  debería aparecer una barra de desplazamiento vertical si el texto
  es lo suficientemente largo como para desbordar. Si el texto fuera
  corto y cupiera, no veríamos ninguna barra de desplazamiento.
</div>Lenguaje del código: PHP (php)

La propiedad overflow es crucial para mantener la integridad de los diseños, crear áreas de contenido con desplazamiento interno (como cuadros de chat o listados largos) y, en algunos casos (con hidden o auto), para establecer un nuevo contexto de formato de bloque (BFC), lo que puede ayudar a contener elementos flotantes o evitar el colapso de márgenes.