overflow (excedente)
====================

Baseline 2022
-------------

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

* Learn more
* See full compatibility
* Report feedback
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 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` (en-US): como se especifica, excepto que si `overflow-x` (en-US) 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` (en-US) 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: 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 \*/
}
```


```
<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
----------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Propiedades CSS relacionadas: `text-overflow`, `white-space`, `overflow-x` (en-US), `overflow-y`, `clip`, `display` (