overflow (excedente)

Sumario

La propiedad CSS overflow especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

Usando la propiedad overflow con un valor distinto a visible, valor por defecto, creará un nuevo contexto de formatos de bloques. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.

Nótese que, cambiando programáticamente el valor de scrollTop al elemento HTML relevante, incluso cuando overflow tenga el valor hidden un elemento podría necesitar ser desplazado.

Valor inicial	`visible`
Applies to	Block-containers, flex containers, and grid containers
Heredable	no
Media	visual
Valor calculado	como se especifica
Animation type	discrete
Canonical order	el orden único no-ambigüo definido por la gramática formal

Sintaxis

Sintáxis formal: [ visible | hidden | clip | scroll | auto ]{1,2}

overflow: visible
overflow: hidden
overflow: scroll
overflow: auto

overflow: inherit

Valores

visible: Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.
hidden: El contenido es recortado y no se muestran barras de posición.
scroll: El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente.
auto: Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.

Extensiones de Mozilla

-moz-scrollbars-none: Usar overflow:hidden.
-moz-scrollbars-horizontal: Es preferible el uso de overflow-x y overflow-y.
-moz-scrollbars-vertical: Es preferible el uso de overflow-x y overflow-y.
-moz-hidden-unscrollable: Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y <html>, <body> usando las flechas del teclado o la rueda del ratón.

Ejemplos

p {  
     width: 12em;
     border: dotted;
     overflow: visible;   /* dibuja barras si es necesario */ 
}

visible (por defecto)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* no se dibujan barras */ }

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* se dibujan ambas barras */ }

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* se dibujan barras según se necesite */ }

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Especificaciones

Especificación	Estado	Comentario
CSS Basic Box Model La definición de 'overflow' en esta especificación.	Working Draft	Sin cambios.
CSS Level 2 (Revision 1) La definición de 'overflow' en esta especificación.	Recommendation

Compatibilidad en navegadores

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome para Android	Firefox para Android	Opera para Android	Safari en iOS	Samsung Internet
`overflow`	Chrome Soporte completo 1	Edge Soporte completo 12	Firefox Soporte completo 1 Notas Soporte completo 1 Notas Notas After Firefox 3.6, the `overflow` property is correctly applied to table group elements (`<thead>`, `<tbody>`, `<tfoot>`).	IE Soporte completo 4 Notas Soporte completo 4 Notas Notas From version 4 to 6, Internet Explorer enlarges an element with `overflow: visible` (default value) to fit the content inside it. `height` and `width` behave like `min-height` and `min-width`, respectively.	Opera Soporte completo 7	Safari Soporte completo 1	WebView Android Soporte completo 37	Chrome Android Soporte completo 18	Firefox Android Soporte completo 4	Opera Android Soporte completo Si	Safari iOS Soporte completo 1	Samsung Internet Android Soporte completo 1.0
`clip` value Experimental	Chrome Sin soporte No	Edge Sin soporte No	Firefox Sin soporte No	IE Sin soporte No	Opera Sin soporte No	Safari Sin soporte No	WebView Android Sin soporte No	Chrome Android Sin soporte No	Firefox Android Sin soporte No	Opera Android Sin soporte No	Safari iOS Sin soporte No	Samsung Internet Android Sin soporte No
Multiple keyword syntax for `overflow-x` and `overflow-y`	Chrome Soporte completo 68	Edge Sin soporte No	Firefox Soporte completo 61	IE Sin soporte No	Opera Soporte completo 55	Safari Sin soporte No	WebView Android Soporte completo 68	Chrome Android Soporte completo 68	Firefox Android Soporte completo 61	Opera Android Soporte completo 48	Safari iOS Sin soporte No	Samsung Internet Android Soporte completo 10.0

Leyenda

Soporte completo: Soporte completo
Sin soporte: Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.: Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.: Ver notas de implementación.

Véase también

Propiedades CSS relacionadas: text-overflow, white-space, overflow-x, overflow-y, clip, display (