overflow: hidden, scroll, auto y clip
Controle cómo se gestiona el contenido desbordado mediante los valores hidden, scroll, auto y clip.
overflow: hidden, scroll, auto y clip es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Resumen de la propiedad overflow
overflow controla qué ocurre cuando el contenido de un elemento supera sus dimensiones definidas. Se aplica a ambos ejes simultáneamente (o use overflow-x/overflow-y para controlar cada eje por separado).
overflow: visible
visible (valor predeterminado): el contenido se muestra fuera de la caja. No crea un Block Formatting Context (BFC). Otros elementos pueden superponerse al contenido que desborda.
overflow: hidden
hidden recorta el contenido en el límite de la caja. Crea un BFC, que contiene los elementos flotantes y evita el colapso de márgenes. Es el valor más habitual para contenedores de imágenes con esquinas redondeadas.
<div class="rounded-card"></div>overflow: scroll
scroll siempre muestra barras de desplazamiento (en los ejes que las admiten), independientemente de si el contenido desborda. Es útil para interfaces coherentes en las que el espacio de las barras debe estar siempre presente para evitar cambios en el diseño.
<div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>overflow: auto
auto muestra barras de desplazamiento solo cuando el contenido realmente desborda. Es preferible a scroll para la mayoría de los contenedores desplazables, ya que evita mostrar barras innecesarias.
<div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>overflow: clip
clip recorta el contenido como hidden, pero NO crea un BFC. Esto significa que no afecta a la contención de elementos flotantes ni al colapso de márgenes. Úselo cuando quiera recortar el contenido sin los efectos secundarios del BFC.
<div class="decorative-overflow"><div class="deco"></div></div>overflow-x y overflow-y
Controle cada eje de forma independiente. Un patrón muy habitual es permitir el desplazamiento horizontal para contenido ancho (tablas, código) mientras el desbordamiento vertical permanece visible:
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>Desbordamiento y BFC
Establecer overflow con cualquier valor distinto de visible y clip crea un Block Formatting Context. Esto contiene los elementos flotantes internos, evita que el colapso de márgenes se propague y establece un nuevo contexto de desplazamiento.
overflow: overlay (no estándar)
overflow: overlay dibuja la barra de desplazamiento sobre el contenido en lugar de ocupar espacio en el diseño. Era un valor no estándar en algunos navegadores y está quedando obsoleto en favor de los estilos modernos de barras de desplazamiento.
scrollbar-gutter
La nueva propiedad scrollbar-gutter: stable reserva espacio para la barra de desplazamiento incluso cuando no se necesita, lo que evita cambios en el diseño cuando el contenido pasa a ser desplazable.
<div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>Desbordamiento y elementos secundarios fijos
Un error habitual: un elemento secundario con position: fixed dentro de un elemento con overflow: hidden se comportará como position: absolute. La posición fija es relativa al bloque contenedor, y el desbordamiento crea un nuevo contexto de apilamiento.
Comprobación rápida
¿Qué valor de overflow recorta el contenido sin crear un Block Formatting Context?
Resumen
visible (valor predeterminado) permite el desbordamiento. hidden recorta y crea un BFC. scroll siempre muestra barras de desplazamiento. auto muestra barras solo cuando son necesarias (es el valor preferido). clip recorta sin crear un BFC. Use overflow-x/y para controlar cada eje por separado. Use scrollbar-gutter: stable para evitar cambios en el diseño.
Preguntas frecuentes
¿La lección «overflow: hidden, scroll, auto y clip» es gratis?
Sí — el texto completo de «overflow: hidden, scroll, auto y clip» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «overflow: hidden, scroll, auto y clip»?
Controle cómo se gestiona el contenido desbordado mediante los valores hidden, scroll, auto y clip. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «overflow: hidden, scroll, auto y clip»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- overflow: hidden, scroll, auto y clip
- scroll-behavior: smooth
- scroll-snap-type y scroll-snap-align
- Estilos de la barra de desplazamiento con ::-webkit-scrollbar