overflow (excedente)

Baseline

Ampliamente disponible

Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.

Ver la compatibilidad completa
Más información

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
Valor calculado	as each of the properties of the shorthand: `overflow-x`: como se especifica, excepto que si `overflow-x` o bien `overflow-y` es distinto de `visible` o `clip`, estos dos valores computan a `auto` o `hidden` respectivamente `overflow-y`: como se especifica, excepto que si `overflow-x` o bien `overflow-y` es distinto de `visible` o `clip`, estos dos valores computan a `auto` o `hidden` respectivamente
Animation type	discrete

Sintaxis

Sintáxis formal: overflow = 
  <'overflow-block'>{1,2}  

<overflow-block> = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto     
Esta sintaxis refleja el estándar más reciente según CSS Overflow Module Level 3. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener información de soporte.

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

`visible`

css

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

<p
  style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;">
  <code>visible</code> (por defecto)<br />
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium.
</p>

`hidden`

css

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

<p
  style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;">
  <code>overflow: hidden</code><br />
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium.
</p>

`scroll`

css

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

<p
  style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;">
  <code>overflow: scroll</code><br />
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium.
</p>

`auto`

css

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

<p
  style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;">
  <code>overflow: auto</code><br />
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium.
</p>

Especificaciones

Especificación
CSS Overflow Module Level 3 # propdef-overflow
Scalable Vector Graphics (SVG) 2 # OverflowAndClipProperties

Compatibilidad con navegadores

Véase también

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

Ayuda a mejorar MDN

Aprende cómo colaborar

Esta página se modificó por última vez el 31 mar 2026 por colaboradores de MDN.

Ver esta página en GitHub • Informar de un problema con este contenido