Overflow

Usa estas utilidades abreviadas para configurar rápidamente cómo el contenido desborda un elemento.

On this page

Overflow

Ajusta la propiedad overflow al vuelo con cuatro valores y clases predeterminadas. Estas clases no son responsivas por defecto.

Este es un ejemplo de uso de .overflow-auto en un elemento con dimensiones de ancho y alto establecidas. Por diseño, este contenido se desplazará verticalmente.

Este es un ejemplo de uso de .overflow-hidden en un elemento con dimensiones de ancho y alto establecidas.

Este es un ejemplo de uso de .overflow-visible en un elemento con dimensiones de ancho y alto establecidas.

Este es un ejemplo de uso de .overflow-scroll en un elemento con dimensiones de ancho y alto establecidas.

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

`overflow-x`

Ajusta la propiedad overflow-x para afectar el desbordamiento del contenido horizontalmente.

Ejemplo de .overflow-x-auto en un elemento

con dimensiones de ancho y alto establecidas.

Ejemplo de .overflow-x-hidden

en un elemento con dimensiones de ancho y alto establecidas.

Ejemplo de .overflow-x-visible

en un elemento con dimensiones de ancho y alto establecidas.

Ejemplo de .overflow-x-scroll en un elemento

con dimensiones de ancho y alto establecidas.

<div class="overflow-x-auto">...</div>
<div class="overflow-x-hidden">...</div>
<div class="overflow-x-visible">...</div>
<div class="overflow-x-scroll">...</div>

`overflow-y`

Ajusta la propiedad overflow-y para afectar el desbordamiento del contenido verticalmente.

Ejemplo de .overflow-y-auto en un elemento con dimensiones de ancho y alto establecidas.

Ejemplo de .overflow-y-hidden en un elemento con dimensiones de ancho y alto establecidas.

Ejemplo de .overflow-y-visible en un elemento con dimensiones de ancho y alto establecidas.

Ejemplo de .overflow-y-scroll en un elemento con dimensiones de ancho y alto establecidas.

<div class="overflow-y-auto">...</div>
<div class="overflow-y-hidden">...</div>
<div class="overflow-y-visible">...</div>
<div class="overflow-y-scroll">...</div>

Usando variables de Sass, puedes personalizar las utilidades de overflow cambiando la variable $overflows en _variables.scss.

CSS

API de utilidades de Sass

Las utilidades de overflow se declaran en nuestra utilities API en scss/_utilities.scss. Aprende a usar la utilities API.

scss/_utilities.scss

"overflow": (
  property: overflow,
  values: auto hidden visible scroll,
),
"overflow-x": (
  property: overflow-x,
  values: auto hidden visible scroll,
),
"overflow-y": (
  property: overflow-y,
  values: auto hidden visible scroll,
),