overflow (excedente)

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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 (en-US). 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
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete

Sintaxis

Sintáxis formal: 
overflow = 
<'overflow-block'>{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 Obsoleto

Usar overflow:hidden.

-moz-scrollbars-horizontal Obsoleto

Es preferible el uso de overflow-x (en-US) y overflow-y.

-moz-scrollbars-vertical Obsoleto

Es preferible el uso de overflow-x (en-US) y overflow-y.

-moz-hidden-unscrollable Non-standard

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 */
}

hidden

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

scroll

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

auto

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

Especificaciones

Specification
CSS Overflow Module Level 3
# propdef-overflow

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también