Saltar al contenido principal Saltar a la navegación de la documentación
Ver en GitHub

Overflow

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

En esta página

Overflow

Ajusta la propiedad overflow sobre la marcha con cuatro valores y clases predeterminados. Estas clases no son responsive de forma predeterminada.

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 del contenido horizontalmente.

.overflow-x-auto ejemplo en un elemento
con dimensiones establecidas de ancho y alto.
.overflow-x-hidden ejemplo
en un elemento con dimensiones de ancho y alto establecidas.
.overflow-x-visible ejemplo
en un elemento con dimensiones de ancho y alto establecidas.
.overflow-x-scroll ejemplo en un elemento
con dimensiones establecidas de ancho y alto.
<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.

.overflow-y-auto como ejemplo en un elemento con dimensiones establecidas de ancho y alto.
.overflow-y-hidden como ejemplo en un elemento con dimensiones de ancho y alto establecidas.
.overflow-y-visible como ejemplo en un elemento con dimensiones establecidas de ancho y alto.
.overflow-y-scroll como ejemplo 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,
),