Browse CSS

Overflow

Control scrolling and clipping while keeping content accessible.

Overflow classes

Class	Behavior
`overflow-auto`	`overflow:auto`
`overflow-hidden`	`overflow:hidden`
`overflow-clip`	`overflow:clip`
`overflow-visible`	`overflow:visible`
`overflow-scroll`	`overflow:scroll`
`overflow-x-auto`	`overflow-x:auto`
`overflow-x-hidden`	`overflow-x:hidden`
`overflow-x-clip`	`overflow-x:clip`
`overflow-x-visible`	`overflow-x:visible`
`overflow-x-scroll`	`overflow-x:scroll`
`overflow-y-auto`	`overflow-y:auto`
`overflow-y-hidden`	`overflow-y:hidden`
`overflow-y-clip`	`overflow-y:clip`
`overflow-y-visible`	`overflow-y:visible`
`overflow-y-scroll`	`overflow-y:scroll`

Use auto for scrolling only when needed. scroll always creates a scroll container, though the operating system may hide its scrollbars. hidden clips content but still allows programmatic scrolling; clip clips without creating a scroll container. visible lets content extend outside the box.

All classes support sm:, md:, and lg: variants. Give a scrolling region a constrained size and an accessible name, and use tabindex="0" when keyboard users need to scroll it. Keep focus outlines and essential content visible. Mixing axes follows CSS rules: visible may compute to auto and clip to hidden when the other axis scrolls.

A horizontally scrolling row

Swipe, use a trackpad, or focus the region and use the arrow keys. Cards keep a readable width while the row scrolls within its frame.

Research

Gather customer insights and define the problem.

Design

Explore ideas and test the experience.

Build

Turn the approved design into a working product.

<div
  class="panel overflow-x-auto max-w-md w-full"
  role="region"
  aria-label="Project stages"
  tabindex="0"
>
  <div class="flex flex-nowrap gap-md">
    <article class="panel shrink-0 w-full max-w-xs stack gap-sm">
      <h3 class="m-0">
        Research
      </h3>
      <p class="muted m-0">
        Gather customer insights and define the problem.
      </p>
    </article>
    <article class="panel shrink-0 w-full max-w-xs stack gap-sm">
      <h3 class="m-0">
        Design
      </h3>
      <p class="muted m-0">
        Explore ideas and test the experience.
      </p>
    </article>
    <article class="panel shrink-0 w-full max-w-xs stack gap-sm">
      <h3 class="m-0">
        Build
      </h3>
      <p class="muted m-0">
        Turn the approved design into a working product.
      </p>
    </article>
  </div>
</div>

A vertically scrolling panel

The aspect ratio bounds this panel without fixing its height for every screen. The activity list scrolls inside it.

Project created
Research notes shared
First concepts reviewed
Prototype updated
Accessibility review completed
Team feedback collected
Launch plan approved
Release scheduled

<div
  class="panel overflow-y-auto aspect-video max-w-md w-full"
  role="region"
  aria-label="Recent activity"
  tabindex="0"
>
  <ol class="stack gap-md m-0">
    <li>
      Project created
    </li>
    <li>
      Research notes shared
    </li>
    <li>
      First concepts reviewed
    </li>
    <li>
      Prototype updated
    </li>
    <li>
      Accessibility review completed
    </li>
    <li>
      Team feedback collected
    </li>
    <li>
      Launch plan approved
    </li>
    <li>
      Release scheduled
    </li>
  </ol>
</div>