Overflow

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

Overflow

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

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

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

<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 (opens in a new tab)

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