overflow

Ejemplos

Mostrando contenido que se desborda

Usa la utilidad overflow-visible para evitar que el contenido dentro de un elemento sea recortado:

Andrew AlfredTechnical advisor

<div class="overflow-visible ...">
  <!-- ... -->
</div>

Ten en cuenta que cualquier contenido que desborde los límites del elemento será visible.

Ocultando contenido que se desborda

Usa la utilidad overflow-hidden para recortar cualquier contenido dentro de un elemento que desborde los límites de ese elemento:

Andrew AlfredTechnical advisor

<div class="overflow-hidden ...">
  <!-- ... -->
</div>

Desplazamiento si es necesario

Usa la utilidad overflow-auto para añadir barras de desplazamiento a un elemento en caso de que su contenido desborde los límites de ese elemento:

Desplázate verticalmente

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<div class="overflow-auto ...">
  <!-- ... -->
</div>

A diferencia de overflow-scroll, que siempre muestra barras de desplazamiento, esta utilidad solo las mostrará si el desplazamiento es necesario.

Desplazamiento horizontal si es necesario

Usa la utilidad overflow-x-auto para permitir el desplazamiento horizontal si es necesario:

Desplázate horizontalmente

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-auto ...">
  <!-- ... -->
</div>

Desplazamiento vertical si es necesario

Usa la utilidad overflow-y-auto para permitir el desplazamiento vertical si es necesario:

Desplázate verticalmente

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<div class="h-32 overflow-y-auto ...">
  <!-- ... -->
</div>

Desplazamiento horizontal siempre

Usa la utilidad overflow-x-scroll para permitir el desplazamiento horizontal y mostrar siempre las barras de desplazamiento a menos que las barras de desplazamiento siempre visibles estén deshabilitadas por el sistema operativo:

Desplázate horizontalmente

Andrew

Emily

Whitney

David

Kristin

Sarah

<div class="overflow-x-scroll ...">
  <!-- ... -->
</div>

Desplazamiento vertical siempre

Usa la utilidad overflow-y-scroll para permitir el desplazamiento vertical y mostrar siempre las barras de desplazamiento a menos que las barras de desplazamiento siempre visibles estén deshabilitadas por el sistema operativo:

Desplázate verticalmente

Andrew AlfredTechnical advisor

Debra HoustonAnalyst

Jane WhiteDirector, Marketing

Ray FlintTechnical Advisor

<div class="overflow-y-scroll ...">
  <!-- ... -->
</div>

Desplazamiento en todas las direcciones

Usa la utilidad overflow-scroll para añadir barras de desplazamiento a un elemento:

<div class="overflow-scroll ...">
  <!-- ... -->
</div>

A diferencia de overflow-auto, que solo muestra barras de desplazamiento si son necesarias, esta utilidad siempre las muestra. Ten en cuenta que algunos sistemas operativos (como macOS) ocultan las barras de desplazamiento innecesarias independientemente de esta configuración.

Diseño Responsive

Prefija una utilidad overflow con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="overflow-auto md:overflow-scroll ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.