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 inicialvisible
Applies toBlock-containers, flex containers, and grid containers
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel 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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo 12Firefox 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 7Safari Soporte completo 1WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android ?
Multiple keyword syntax for overflow-x and overflow-y
Experimental
Chrome Soporte completo 68Edge Sin soporte NoFirefox Soporte completo 61IE Sin soporte NoOpera Soporte completo 55Safari Sin soporte NoWebView Android Soporte completo 68Chrome Android Soporte completo 68Edge Mobile Sin soporte NoFirefox Android Soporte completo 61Opera Android Soporte completo 55Safari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
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

Etiquetas y colaboradores del documento

Colaboradores en esta página: manueldevjour, SJW, marc-ferrer, developingo, Sebastianz, Sheppy, teoli, _0x
Última actualización por: manueldevjour,