Overflow en CSS
Puedes dar a una caja un tamaño fijo. ¿Y si el contenido es más alto o más ancho que esa caja? overflow decide si el sobrante se desborda, se recorta o se vuelve desplazable.
Palabras clave de un vistazo
📊 Valores comunes de overflow
| Valor | Significado cotidiano |
|---|---|
visible (por defecto) |
El contenido extra puede salirse de la caja |
hidden |
El sobrante se recorta; sin barras de desplazamiento |
scroll |
Se muestran barras (a menudo aunque no hagan falta) |
auto |
Las barras aparecen solo cuando el contenido desborda |
Por defecto: el contenido puede salirse
Con overflow: visible (por defecto), el contenido largo puede pintarse fuera de los bordes de la caja.
Overflow visible (por defecto)
css.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}Recortar con hidden
overflow: hidden corta lo que no cabe. Útil para bordes limpios — pero el usuario no puede desplazar el resto.
Hidden recorta el desborde
css.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}Barras siempre con scroll
overflow: scroll hace la caja desplazable y suele reservar espacio de barra aunque el contenido quepa.
Scroll siempre
css.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}Auto — desplazar solo cuando hace falta
overflow: auto es una elección calmada del día a día para paneles: las barras aparecen al desbordar y a menudo se quedan fuera cuando no hace falta.
Auto cuando hace falta
css.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}Controlar un eje
Usa overflow-x y overflow-y cuando el comportamiento horizontal y vertical deban diferir — por ejemplo, permitir scroll vertical y recortar el desborde lateral.
Scroll vertical, recorte horizontal
css.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}Hábito práctico de panel
Da a la caja una altura real (o max-height) y elige auto para zonas de contenido legibles y desplazables.
Panel de notas desplazable
css.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}Pruébalo tú
- Haz una caja con
widthyheightcorto, y pega varios párrafos dentro. - Cambia
overflowentrevisible,hidden,scrollyauto. - Pon
overflow-x: hiddenyoverflow-y: autoen una línea ancha de texto. - Construye
.note-panelconmax-heighty mira las barras solo cuando hacen falta. - Sin límite de altura (o max-height), overflow a menudo no tiene qué restringir.
Errores comunes
- Esperar efectos de overflow sin altura o ancho limitados
- Usar
scrollen todas partes cuandoautosería más calmado - Confundir overflow (desborde de caja) con text-overflow (puntos suspensivos en texto — herramienta posterior)
- Recortar con
hiddeny olvidar que el usuario puede necesitar el resto - Asumir que overflow cambia la cuenta de box-sizing (no lo hace)
Resumen
- Overflow controla desborde, recorte y scroll cuando el contenido es mayor que su caja
- Por defecto es
visible;hiddenrecorta;scrollofrece barras;autocuando hace falta - Suele hacer falta un tamaño limitado (height / max-height / width) para ver el efecto
overflow-xyoverflow-yseparan los ejes- Para muchos paneles,
overflow: autoes un hábito calmado
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior