¿Qué hace la propiedad overflow en CSS y en qué casos debería usarse?

La propiedad overflow en CSS determina cómo manejar el contenido que se desborda del borde de un elemento.

• visible: El contenido se muestra completamente, incluso si se desborda del contenedor.
• hidden: El contenido que se desborda del contenedor se recorta y no se ve.
• scroll: Siempre se muestran las barras de desplazamiento (horizontal y vertical), incluso si el contenido no se desborda.
• auto: Las barras de desplazamiento solo aparecen cuando son necesarias (cuando el contenido se desborda).

Se debe usar:

• Cuando el contenido del elemento (por ejemplo, texto o imagen) puede ser mayor que las dimensiones establecidas y se requiere gestionar su visualización.
• Para crear áreas desplazables dentro de la página, por ejemplo, para listas, bloques de código o tablas.
• Para recortar contenido no deseado que se desborda del elemento, para mantener el diseño original.

Ejemplo de uso de overflow: auto; para un bloque con altura limitada:

.scrollable-block {
  height: 200px; /* Limitamos la altura del bloque */
  overflow: auto; /* Agregamos barras de desplazamiento si el contenido es mayor */
  border: 1px solid #ccc; /* Añadimos un borde para mayor claridad */
  padding: 10px; /* Espaciado interno */
}