Sections

Overflow

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

Class Properties
.overflow-auto overflow: auto;
.overflow-x-auto overflow-x: auto;
.overflow-y-auto overflow-y: auto;
.overflow-hidden overflow: hidden;
.overflow-x-hidden overflow-x: hidden;
.overflow-y-hidden overflow-y: hidden;
.overflow-visible overflow: visible;
.overflow-x-visible overflow-x: visible;
.overflow-y-visible overflow-y: visible;
.overflow-scroll overflow: scroll;
.overflow-x-scroll overflow-x: scroll;
.overflow-y-scroll overflow-y: scroll;

Usage

Auto

Use .overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.

<p class="overflow-auto bg-gray-200 h-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.</p>

Unlike .overflow-scroll, which always show scrollbars, this utility will only show them if scrolling is necessary.

Use .overflow-x-auto to allow horizontal scrolling if needed.

Use .overflow-y-auto to allow vertical scrolling if needed.

Hidden

Use .overflow-hidden to clip any content within an element that overflows the bounds of that element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.

<p class="overflow-hidden bg-gray-200 h-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.</p>

Use .overflow-x-hidden to hide overflow content of a block-level element when it overflows at the left and right edges.

Use .overflow-y-hidden to hide overflow content of a block-level element when it overflows at the top and bottom edges.

Visible

Use .overflow-visible show overflow content of a block-level element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.

<p class="overflow-visible bg-gray-200 h-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.</p>

Use .overflow-x-visible to show overflow content of a block-level element when it overflows at the left and right edges.

Use .overflow-y-visible to show overflow content of a block-level element when it overflows at the top and bottom edges.

Scroll

Use .overflow-scroll to add scrollbars to an element. Unlike .overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems hide unnecessary scrollbars regardless of this setting.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.

<p class="overflow-scroll bg-gray-200 h-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.</p>

Use .overflow-x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Use .overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

Variants

By default, no responsive or hover-state variants are generated for overflow utilities.

Responsive

To control the display behavior of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility.

For example, use .md:overflow-hidden to apply the overflow-hidden utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:overflow-hidden, add "overflow" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "overflow",
);