1. ¿Qué es overflow?

La propiedad overflow determina cómo se muestra el contenido que supera el tamaño definido de un elemento (ancho o alto). Es esencial para crear diseños fluidos, contenedores con scroll interno y evitar que el contenido rompa la maquetación.

• visible: el contenido desbordado se muestra fuera del contenedor (valor por defecto).
• hidden: el contenido que excede se corta sin barras de desplazamiento.
• scroll: siempre aparecen barras de desplazamiento, aunque el contenido quepa.
• auto: aparecen barras solo cuando el contenido realmente supera el contenedor.
• clip (CSS 3): corta el contenido sin generar scrollbars y sin crear una capa de recorte.

2. Valores específicos: overflow-x y overflow-y

Permiten controlar de forma independiente el desbordamiento horizontal y vertical, ideal para layouts con scroll horizontal (p.ej., carruseles) o áreas de texto largas.

/* Scroll solo vertical */
.container-vertical {
  overflow-y: auto;
  overflow-x: hidden;
}
/* Scroll solo horizontal */
.carousel {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

3. Comparativa visual de los valores de overflow

4. Ejemplos prácticos

4.1. Caja con scroll vertical y altura fija

<div class="box-scroll" style="height:200px; overflow-y:auto; border:1px solid #ddd; padding:1rem;">
  <p>Contenido largo...</p>
  <p>Más texto que supera los 200px de altura.</p>
</div>

4.2. Carrusel horizontal puro CSS

<div class="carousel d-flex" style="overflow-x:auto; gap:1rem;">
  <img src="img1.jpg" class="flex-shrink-0" style="width:150px;">
  <img src="img2.jpg" class="flex-shrink-0" style="width:150px;">
  <img src="img3.jpg" class="flex-shrink-0" style="width:150px;">
</div>

4.3. Ocultar overflow para evitar "scroll‑jank" en móviles

html, body {
  overflow-x: hidden; /* Previene desplazamiento horizontal inesperado */
}

5. Personalización de scrollbars (solo navegadores basados en WebKit/Chromium)

/* Estilos modernos para scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
  border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

Para Firefox se usa scrollbar-width y scrollbar-color:

/* Firefox */
.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

6. Accesibilidad y usabilidad

• Siempre ofrece focus visible dentro de contenedores scrollables (outline o box-shadow).
• Proporciona texto alternativo o indicadores de "más contenido" para usuarios de lectores de pantalla.
• Evita overflow: hidden en áreas donde el usuario pueda necesitar ver todo el contenido (p.ej., formularios extensos).

7. Rendimiento y buenas prácticas

El desbordamiento puede generar repaints y reflows costosos. Algunas recomendaciones:

• Limita la altura/anchura de los contenedores scrollables para que el navegador pueda usar layers compositing.
• Prefiere overflow: auto en lugar de overflow: scroll para evitar renderizado de scrollbars innecesarias.
• En móviles, usa will-change: transform o translateZ(0) para activar la aceleración GPU en áreas scrollables.

8. Compatibilidad entre navegadores

Los valores clip son compatibles a partir de Chrome 87, Firefox 66 y Safari 13.1.

9. Troubleshooting frecuente

1. Scrollbars invisibles en Windows: verifica que no haya overflow: hidden en un elemento padre.
2. El contenido se corta en iOS: añade -webkit-overflow-scrolling: touch para scroll suave.
3. Desbordamiento inesperado en flexbox: establece min-width: 0 o min-height: 0 en el ítem flex.
4. Barra de desplazamiento se superpone al contenido: usa box-sizing: border-box o agrega padding-right equivalente al ancho de la scrollbar.

10. Seguridad y consideraciones de privacidad

Ocultar contenido sensible con overflow: hidden no es una medida de seguridad; el contenido sigue presente en el DOM y puede ser accedido mediante inspección. Si necesitas proteger datos, utiliza técnicas de renderizado del lado del servidor o encriptación, no solo CSS.