CSS
Controla contenido desbordado con overflow, scroll containers, clipping, barras de desplazamiento, overscroll y comportamiento de scroll.
Overflow aparece cuando el contenido no cabe dentro de la caja asignada.
.panel {
overflow: auto;
}visible → permite desbordar
hidden → recorta; el contenido puede desplazarse programáticamente
clip → recorta sin scroll container normal
scroll → crea scrolling incluso si no hace falta
auto → crea scroll cuando es necesario.panel {
overflow-inline: auto;
overflow-block: clip;
}overflow-x/y son físicos; inline/block siguen writing mode.
Un valor diferente de visible/clip en el eje relevante puede crear un scroll container y un block formatting context.
Esto afecta sticky positioning, scroll snapping y búsqueda del scroll ancestor.
.crop {
overflow: clip;
overflow-clip-margin: 0.5rem;
}clip evita el scrolling normal. Hidden puede seguir permitiendo scroll mediante APIs o foco.
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Ellipsis requiere condiciones de overflow y línea. Oculta texto; no debe ser la única forma de acceder a contenido crítico.
.content {
overflow-wrap: anywhere;
}Para texto o URLs largas, permitir breaks suele ser mejor que crear scroll horizontal global.
.panel {
scrollbar-gutter: stable;
}Reserva espacio para reducir cambios de layout cuando aparece la scrollbar.
.modal-body {
overscroll-behavior: contain;
}Controla scroll chaining y acciones de overscroll. No bloquees comportamientos del sistema sin necesidad.
html {
scroll-behavior: smooth;
}Afecta navegación programática o por fragmentos, no el desplazamiento manual. Respeta reduced motion cuando el movimiento sea significativo.
Un elemento enfocado dentro de overflow hidden puede hacer que el contenedor se desplace o dejar el foco visual fuera de vista. Prueba navegación por teclado.
¿Por qué añadir overflow: auto a un ancestor puede cambiar un sticky child?
Porque ese ancestor puede convertirse en el scroll container de referencia para sticky.
Position y containing blocks explica cómo se calculan offsets.