CSS Academy · Lección

Overflow: Scroll, Clip y Auto

Controle qué ocurre cuando el contenido supera su contenedor mediante las propiedades overflow.

Overflow: Scroll, Clip y Auto es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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.

¿Qué es el desbordamiento?

El desbordamiento se produce cuando el contenido de un elemento es más grande que sus dimensiones definidas. La propiedad overflow controla qué ocurre con este contenido sobrante.

overflow: visible (predeterminado)

De forma predeterminada, el contenido se desborda y queda visible fuera de la caja del elemento. Esto puede hacer que el contenido se superponga a elementos hermanos o salga de la ventana gráfica.

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

overflow: hidden recorta cualquier contenido que se extienda más allá de los límites del elemento. El contenido recortado no es accesible ni se puede desplazar.

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

overflow: scroll siempre muestra barras de desplazamiento, incluso cuando el contenido cabe. Úselo cuando desee una interfaz coherente independientemente del tamaño del contenido.

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

overflow: auto solo muestra barras de desplazamiento cuando el contenido realmente se desborda. Normalmente se prefiere a scroll para evitar espacios reservados innecesarios para las barras de desplazamiento.

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

overflow: clip es similar a hidden, pero más estricto: no crea un contexto de formato de bloque y JavaScript no puede desplazarlo. Es ideal para recortes seguros para el rendimiento.

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x y overflow-y

Controle cada eje de forma independiente. Un patrón común permite el desplazamiento horizontal para contenido ancho, como código o tablas:

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

Patrón de contenedor desplazable

Para crear un contenedor desplazable, necesita tanto una altura fija como overflow: auto o scroll:

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

Contexto de formato de bloque mediante overflow

Establecer overflow en cualquier valor distinto de visible crea un contexto de formato de bloque (BFC). Esto contiene los elementos flotantes internos y evita que el colapso de márgenes se extienda fuera del contenedor.

Encadenamiento del desplazamiento

Cuando un contenedor desplazable llega al límite del desplazamiento, los eventos de desplazamiento pueden «encadenarse» al elemento principal. Utilice overscroll-behavior: contain para evitarlo.

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow frente a overflow

text-overflow: ellipsis se aplica al texto dentro de un elemento y requiere overflow: hidden + white-space: nowrap para funcionar. overflow controla el comportamiento del desbordamiento del propio elemento.

Comprobación rápida

¿Qué valor de overflow muestra las barras de desplazamiento solo cuando el contenido realmente se desborda?

Repaso

overflow: hidden recorta el contenido. overflow: auto añade barras de desplazamiento solo cuando es necesario (preferido). overflow: scroll siempre muestra las barras de desplazamiento. overflow: clip recorta sin crear un contexto de formato nuevo. Utilice overflow-x/y para controlar cada eje por separado.

Preguntas frecuentes

¿La lección «Overflow: Scroll, Clip y Auto» es gratis?

Sí — el texto completo de «Overflow: Scroll, Clip y Auto» 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: Scroll, Clip y Auto»?

Controle qué ocurre cuando el contenido supera su contenedor mediante las propiedades overflow. 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 3 de 4.

¿Cuánto tiempo toma la lección «Overflow: Scroll, Clip y Auto»?

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

← Volver a CSS Academy