Overflow

Controls how an element behaves when content overflows.

Class	Properties
ovf-auto	overflow: auto;
ovf-c	overflow: clip;
ovf-h	overflow: hidden;
ovf-s	overflow: scroll;
ovf-v	overflow: visible;

Overflow X

Controls how an element behaves when content overflows on the X-axis.

Class	Properties
ovf-x-auto	overflow-x: auto;
ovf-x-c	overflow-x: clip;
ovf-x-h	overflow-x: hidden;
ovf-x-s	overflow-x: scroll;
ovf-x-v	overflow-x: visible;

Overflow Y

Controls how an element behaves when content overflows on the Y-axis.

Class	Properties
ovf-y-auto	overflow-x: auto;
ovf-y-c	overflow-x: clip;
ovf-y-h	overflow-x: hidden;
ovf-y-s	overflow-x: scroll;
ovf-y-v	overflow-x: visible;

---

Using breakpoints

Using responsive breakpoints like sm:ovf-*, md:ovf-*, lg:ovf-*, and xxl:ovf-* allows targeting specific utilities in different viewports.

<div class="ovf-h md:ovf-auto ..."></div>

Using variants

Using :hover variants such as h:ovf-* allows you to override elements and change their values when hovering over them.

<div class="ovf-h h:ovf-auto ..."></div>