0build.dev
Choose a layout

overflow

Report an Issue
Class Description

overflow-auto

Sets overflow: auto. Adds scrollbars only when needed.

CSS Rules 

.overflow-auto {
  overflow: auto;
}

Usage 

<element class="overflow-auto" />

Responsive

Prefix .overflow-auto utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-auto" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-auto:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-auto:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-auto::before" />

<element class="content-after overflow-auto::after" />
 .overflow-auto Sets overflow: auto. Adds scrollbars only when needed.

overflow-hidden

Sets overflow: hidden. Clips content that exceeds bounds.

CSS Rules 

.overflow-hidden {
  overflow: hidden;
}

Usage 

<element class="overflow-hidden" />

Responsive

Prefix .overflow-hidden utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-hidden" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-hidden:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-hidden:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-hidden::before" />

<element class="content-after overflow-hidden::after" />
 .overflow-hidden Sets overflow: hidden. Clips content that exceeds bounds.

overflow-clip

Clips overflow content extending beyond the element's box, hiding it without enabling scrolling.

CSS Rules 

.overflow-clip {
  overflow: clip;
}

Usage 

<element class="overflow-clip" />

Responsive

Prefix .overflow-clip utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-clip" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-clip:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-clip:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-clip::before" />

<element class="content-after overflow-clip::after" />
 .overflow-clip Clips overflow content extending beyond the element's box, hiding it without enabling scrolling.

overflow-visible

Sets overflow: visible. Content can exceed the element bounds.

CSS Rules 

.overflow-visible {
  overflow: visible;
}

Usage 

<element class="overflow-visible" />

Responsive

Prefix .overflow-visible utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-visible" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-visible:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-visible:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-visible::before" />

<element class="content-after overflow-visible::after" />
 .overflow-visible Sets overflow: visible. Content can exceed the element bounds.

overflow-scroll

Sets overflow: scroll. Always shows scrollbars.

CSS Rules 

.overflow-scroll {
  overflow: scroll;
}

Usage 

<element class="overflow-scroll" />

Responsive

Prefix .overflow-scroll utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-scroll" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-scroll:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-scroll:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-scroll::before" />

<element class="content-after overflow-scroll::after" />
 .overflow-scroll Sets overflow: scroll. Always shows scrollbars.

overflow-x-auto

Adds horizontal scrolling if content overflows the element horizontally.

CSS Rules 

.overflow-x-auto {
  overflow-x: auto;
}

Usage 

<element class="overflow-x-auto" />

Responsive

Prefix .overflow-x-auto utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-x-auto" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-x-auto:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-x-auto:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-x-auto::before" />

<element class="content-after overflow-x-auto::after" />
 .overflow-x-auto Adds horizontal scrolling if content overflows the element horizontally.

overflow-y-auto

Sets overflow-y: auto. Vertical scroll when content overflows.

CSS Rules 

.overflow-y-auto {
  overflow-y: auto;
}

Usage 

<element class="overflow-y-auto" />

Responsive

Prefix .overflow-y-auto utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-y-auto" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-y-auto:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-y-auto:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-y-auto::before" />

<element class="content-after overflow-y-auto::after" />
 .overflow-y-auto Sets overflow-y: auto. Vertical scroll when content overflows.

overflow-x-hidden

Sets overflow-x: hidden. Clips only horizontal overflow.

CSS Rules 

.overflow-x-hidden {
  overflow-x: hidden;
}

Usage 

<element class="overflow-x-hidden" />

Responsive

Prefix .overflow-x-hidden utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-x-hidden" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-x-hidden:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-x-hidden:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-x-hidden::before" />

<element class="content-after overflow-x-hidden::after" />
 .overflow-x-hidden Sets overflow-x: hidden. Clips only horizontal overflow.

overflow-y-hidden

Hides content that overflows the element vertically.

CSS Rules 

.overflow-y-hidden {
  overflow-y: hidden;
}

Usage 

<element class="overflow-y-hidden" />

Responsive

Prefix .overflow-y-hidden utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-y-hidden" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-y-hidden:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-y-hidden:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-y-hidden::before" />

<element class="content-after overflow-y-hidden::after" />
 .overflow-y-hidden Hides content that overflows the element vertically.

overflow-x-clip

Clips horizontal overflow content extending beyond the element's box.

CSS Rules 

.overflow-x-clip {
  overflow-x: clip;
}

Usage 

<element class="overflow-x-clip" />

Responsive

Prefix .overflow-x-clip utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-x-clip" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-x-clip:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-x-clip:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-x-clip::before" />

<element class="content-after overflow-x-clip::after" />
 .overflow-x-clip Clips horizontal overflow content extending beyond the element's box.

overflow-y-clip

Clips vertical overflow content extending beyond the element's box.

CSS Rules 

.overflow-y-clip {
  overflow-y: clip;
}

Usage 

<element class="overflow-y-clip" />

Responsive

Prefix .overflow-y-clip utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-y-clip" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-y-clip:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-y-clip:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-y-clip::before" />

<element class="content-after overflow-y-clip::after" />
 .overflow-y-clip Clips vertical overflow content extending beyond the element's box.

overflow-x-visible

Ensures horizontal overflow is not clipped or hidden.

CSS Rules 

.overflow-x-visible {
  overflow-x: visible;
}

Usage 

<element class="overflow-x-visible" />

Responsive

Prefix .overflow-x-visible utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-x-visible" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-x-visible:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-x-visible:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-x-visible::before" />

<element class="content-after overflow-x-visible::after" />
 .overflow-x-visible Ensures horizontal overflow is not clipped or hidden.

overflow-y-visible

Ensures vertical overflow is not clipped or hidden.

CSS Rules 

.overflow-y-visible {
  overflow-y: visible;
}

Usage 

<element class="overflow-y-visible" />

Responsive

Prefix .overflow-y-visible utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-y-visible" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-y-visible:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-y-visible:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-y-visible::before" />

<element class="content-after overflow-y-visible::after" />
 .overflow-y-visible Ensures vertical overflow is not clipped or hidden.

overflow-x-scroll

Forces a horizontal scrollbar whether content overflows or not.

CSS Rules 

.overflow-x-scroll {
  overflow-x: scroll;
}

Usage 

<element class="overflow-x-scroll" />

Responsive

Prefix .overflow-x-scroll utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-x-scroll" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-x-scroll:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-x-scroll:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-x-scroll::before" />

<element class="content-after overflow-x-scroll::after" />
 .overflow-x-scroll Forces a horizontal scrollbar whether content overflows or not.

overflow-y-scroll

Forces a vertical scrollbar whether content overflows or not.

CSS Rules 

.overflow-y-scroll {
  overflow-y: scroll;
}

Usage 

<element class="overflow-y-scroll" />

Responsive

Prefix .overflow-y-scroll utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:overflow-y-scroll" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="overflow-y-scroll:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="overflow-y-scroll:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before overflow-y-scroll::before" />

<element class="content-after overflow-y-scroll::after" />
 .overflow-y-scroll Forces a vertical scrollbar whether content overflows or not.