Skip to main content Skip to docs navigation
Ver en GitHub

Desbordamiento (Overflow)

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

En esta página

Desbordamiento (Overflow)

Ajusta la propiedad overflow sobre la marcha con cuatro valores y clases predeterminados. Estas clases no son responsivas por defecto.

Este es un ejemplo del 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 del uso de .overflow-hidden en un elemento con dimensiones de ancho y alto establecidas.

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

Este es un ejemplo del 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 de 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 de 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 Sass, puedes personalizar las utilidades de desbordamiento cambiando la variable $overflows en _variables.scss.

CSS

API de utilidades de Sass

Las utilidades de desbordamiento se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

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,
),