Overflow

Use overflow utilities to control what happens when content becomes larger than its container.

They are useful for scrollable tables, clipped media, modal bodies, sidebars, feeds, carousels and any layout where content needs predictable boundaries.

FrontAlign includes unified overflow utilities, axis-specific overflow utilities for controlling scroll chaining and boundary behavior.

Quick reference

Group	Classes	Styles	Use case
Unified overflow	`overflow-auto`, `overflow-hidden`, `overflow-clip`, `overflow-visible`,	`overflow: ...;`	Control overflow on both axes at the same time.
Horizontal overflow	`overflow-x-auto`, `overflow-x-hidden`, `overflow-x-clip`, `overflow-x-visible`,	`overflow-x: ...;`	Control horizontal overflow only.
Vertical overflow	`overflow-y-auto`, `overflow-y-hidden`, `overflow-y-clip`, `overflow-y-visible`, `overflow-y-scroll`	`overflow-y: ...;`	Control vertical overflow only.

Overflow values

Value	Unified	X axis	Y axis	Behavior
`auto`	`overflow-auto`	`overflow-x-auto`	`overflow-y-auto`	Show scrollbars only when content overflows.
`hidden`	`overflow-hidden`	`overflow-x-hidden`	`overflow-y-hidden`	Clip overflowing content and hide it from view.
`clip`	`overflow-clip`	`overflow-x-clip`	`overflow-y-clip`	Clip content like hidden, but disables programmatic scrolling.
`visible`	`overflow-visible`	`overflow-x-visible`	`overflow-y-visible`	Allow content to render outside the element bounds.
`scroll`	`overflow-scroll`	`overflow-x-scroll`	`overflow-y-scroll`	Always show scrollbars regardless of content size.

Usage

Use unified overflow utilities when both axes should behave the same way.

<!-- Scrollbar appears only when content overflows -->
<div class="overflow-auto" style="height: 200px;">
  ...long content...
</div>

<!-- Clip content to element bounds -->
<div class="overflow-hidden">
  <img src="banner.jpg" alt="">
</div>

<!-- Always show scrollbars -->
<div class="overflow-scroll" style="height: 300px;">
  ...content...
</div>

Axis control

Use axis-specific utilities when only horizontal or vertical overflow needs to be managed.

Horizontal overflow

<!-- Horizontally scrollable table wrapper -->
<div class="overflow-x-auto">
  <table>
    ...
  </table>
</div>

<!-- Prevent horizontal scroll on the page -->
<body class="overflow-x-hidden">
  ...
</body>

Vertical overflow

<!-- Scrollable sidebar with fixed height -->
<aside class="overflow-y-auto" style="height: 100vh;">
  <nav>
    ...
  </nav>
</aside>

<!-- Modal body that scrolls independently -->
<div class="overflow-y-auto" style="max-height: 400px;">
  ...modal content...
</div>

Combining axes

<!-- Scroll vertically, clip horizontally -->
<div class="overflow-x-hidden overflow-y-auto" style="height: 300px;">
  ...content...
</div>

<!-- Table: horizontal scroll allowed, no vertical overflow -->
<div class="overflow-x-auto overflow-y-hidden">
  <table>
    ...
  </table>
</div>

Responsive table wrapper

<div class="overflow-x-auto">
  <table>
    <thead>
      ...
    </thead>
    <tbody>
      ...
    </tbody>
  </table>
</div>

Horizontal mobile protection

<body class="overflow-x-hidden">
  ...
</body>

Scrollable sidebar

<aside class="overflow-y-auto is-sticky" style="max-height: 100vh;">
  <nav>
    ...
  </nav>
</aside>

Horizontal card strip

<div class="overflow-x-auto overscroll-x-contain is-flex gap-3">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Responsive

Breakpoint	Unified overflow	Horizontal overflow	Vertical overflow
`md`	`md:overflow-auto`, `md:overflow-hidden`, `md:overflow-visible`	`md:overflow-x-auto`, `md:overflow-x-hidden`, `md:overflow-x-visible`	`md:overflow-y-auto`, `md:overflow-y-hidden`, `md:overflow-y-visible`
`lg`	`lg:overflow-auto`, `lg:overflow-hidden`, `lg:overflow-visible`	`lg:overflow-x-auto`, `lg:overflow-x-hidden`, `lg:overflow-x-visible`	`lg:overflow-y-auto`, `lg:overflow-y-hidden`, `lg:overflow-y-visible`

<!-- Clip on small screens, allow horizontal scroll from medium screens -->
<div class="overflow-hidden md:overflow-x-auto">
  ...
</div>

<!-- Hide vertical overflow by default, scroll on large screens -->
<div class="overflow-y-hidden lg:overflow-y-auto">
  ...
</div>

Responsive variants are useful for tables, mobile menus, app shells and adaptive dashboard layouts.

Usage notes

Use overflow-x-auto for wide tables and horizontal content that should remain accessible on small screens.
Use overflow-hidden when media or decorative elements should be clipped to a card or section.
Use overflow-y-auto for modal bodies, sidebars, panels and feeds with fixed or maximum heights.
Be careful with overflow-hidden and overflow-auto on parents of sticky elements, because they can prevent position: sticky; from working as expected.