Overflow and visibility

Overflow

Helper classes for controlling how an element handles content that is too large for the container.

.overflow-auto
or
.overflow-{xs,sm,md,lg,xl,xxl}-auto 		overflow: auto;
.overflow-hidden
or
.overflow-{xs,sm,md,lg,xl,xxl}-hidden 		overflow: hidden;
.overflow-visible
or
.overflow-{xs,sm,md,lg,xl,xxl}-visible 		overflow: visible;
.overflow-scroll
or
.overflow-{xs,sm,md,lg,xl,xxl}-scroll 		overflow: scroll;
.overflow-x-auto
or
.overflow-x-{xs,sm,md,lg,xl,xxl}-auto 		overflow-x: auto;
.overflow-x-hidden
or
.overflow-x-{xs,sm,md,lg,xl,xxl}-hidden 		overflow-x: hidden;
.overflow-x-visible
or
.overflow-x-{xs,sm,md,lg,xl,xxl}-visible 		overflow-x: visible;
.overflow-x-scroll
or
.overflow-x-{xs,sm,md,lg,xl,xxl}-scroll 		overflow-x: scroll;
.overflow-y-auto
or
.overflow-y-{xs,sm,md,lg,xl,xxl}-auto 		overflow-y: auto;
.overflow-y-hidden
or
.overflow-y-{xs,sm,md,lg,xl,xxl}-hidden 		overflow-y: hidden;
.overflow-y-visible
or
.overflow-y-{xs,sm,md,lg,xl,xxl}-visible 		overflow-y: visible;
.overflow-y-scroll
or
.overflow-y-{xs,sm,md,lg,xl,xxl}-scroll 		overflow-y: scroll; 
					

<!-- Overflow -->



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




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



<!-- or with breakpoints -->



<div class="overflow-x-xs-auto"> for min-width: 550px and up </div>




<div class="overflow-x-sm-auto"> for min-width: 769px and up </div>




<div class="overflow-x-md-auto"> for min-width: 992px and up </div>




<div class="overflow-x-lg-auto"> for min-width: 1280px and up </div>




<div class="overflow-x-xl-auto"> for min-width: 1440px and up </div>




<div class="overflow-x-xxl-auto"> for min-width: 1680px and up </div>

Visibility

Use visibility classes to add display or to hide and element.

Here are all the supported classes:

.visibile
or
.visibile-{xs,sm,md,lg,xl,xxl} 		visibility: visibile;
.invisible
or
.invisible-{xs,sm,md,lg,xl,xxl} 		visibility: hidden; 
					


<div class="visible"> ... </div>




<div class="visible-sm"> ... </div>




<div class="invisible"> ... </div>




<div class="invisible-lg"> ... </div>

Z-index

Helper classes for controlling the stack order of an element.

Here are all the supported classes:

  • .z-index-0 - z-index: 0;
  • .z-index-1 - z-index: 1;
  • .z-index-2 - z-index: 2;
  • .z-index-3 - z-index: 3;
  • .z-index-4 - z-index: 4;
  • .z-index-5 - z-index: 5;
  • .z-index-10 - z-index: 10;
  • .z-index-20 - z-index: 20;
  • .z-index-50 - z-index: 50;
  • .z-index-auto - z-index: auto;
					


<div class="z-index-3"> ... </div>

Additional examples

The following examples are also used by our Playwright CSS property assertion tests.

Overflow

Demonstrates the overflow helper classes.

.overflow-auto This content overflows the container to demonstrate the overflow-auto class behaviour.
.overflow-hidden This content overflows the container to demonstrate the overflow-hidden class behaviour.
.overflow-visible This content overflows the container to demonstrate the overflow-visible class.
.overflow-scroll This content overflows the container to demonstrate the overflow-scroll class.

Overflow X

.overflow-x-auto Wide content inside a narrow container.
.overflow-x-hidden Wide content inside a narrow container.

Overflow Y

.overflow-y-auto Tall content that overflows vertically to demonstrate the class.
.overflow-y-hidden Tall content that overflows vertically to demonstrate the class.

Visibility

Demonstrates the visibility helper classes.

.visible This element is visible.

Z-index

Demonstrates the z-index helper classes.

.z-index-0
.z-index-1
.z-index-5
.z-index-10
.z-index-50
.z-index-auto