Overflow

Overflow utilities control what happens when content is larger than its container. Use them to clip content, add scrollbars, or allow content to overflow visibly.

Overflow classes

Class CSS value Behavior
.nys-overflow-auto overflow: auto Adds scrollbars only when content overflows
.nys-overflow-hidden overflow: hidden Clips overflowing content with no scrollbar
.nys-overflow-scroll overflow: scroll Always shows scrollbars
.nys-overflow-visible overflow: visible Content overflows visibly (default)

overflow-auto

The NYS Office of General Services manages state buildings, procurement contracts, and fleet vehicles across the Capital District and beyond. Their services support every state agency's operations.

overflow-hidden

The NYS Office of General Services manages state buildings, procurement contracts, and fleet vehicles across the Capital District and beyond. Their services support every state agency's operations.
Copy Code
<!-- Scrollbar only when needed -->
<div class="nys-overflow-auto" style="max-height: 100px;">
  Long content here...
</div>
<!-- Clip overflowing content -->
<div class="nys-overflow-hidden" style="max-height: 100px;">
  Long content here...
</div>

Axis-specific overflow

Control overflow on a single axis with -x and -y variants. This is useful for horizontal scrolling containers or vertically clipped content.

Overflow-x

Class CSS value
.nys-overflow-x-auto overflow-x: auto
.nys-overflow-x-hidden overflow-x: hidden
.nys-overflow-x-scroll overflow-x: scroll
.nys-overflow-x-visible overflow-x: visible
Albany • Buffalo • Rochester • Syracuse • Yonkers • New Rochelle • Mount Vernon • Schenectady • Utica • White Plains • Hempstead • Troy • Niagara Falls • Binghamton • Freeport • Valley Stream
Copy Code
<!-- Horizontal scroll when content overflows -->
<div class="nys-overflow-x-auto">
  <div style="white-space: nowrap;">
    Wide content that may exceed the container width...
  </div>
</div>

Overflow-y

Class CSS value
.nys-overflow-y-auto overflow-y: auto
.nys-overflow-y-hidden overflow-y: hidden
.nys-overflow-y-scroll overflow-y: scroll
.nys-overflow-y-visible overflow-y: visible

NYS Department of Transportation — Maintains over 100,000 miles of highway and more than 7,500 bridges statewide.

Thruway Authority — Operates the 570-mile New York State Thruway, one of the longest toll highways in the United States.

MTA — Provides public transit in the New York metropolitan area, serving millions of riders daily across subway, bus, and rail.

NYSDOT Regions — Divided into 11 regional offices to manage construction, maintenance, and traffic operations locally.

Copy Code
<!-- Vertical scroll when content overflows -->
<div class="nys-overflow-y-auto" style="max-height: 120px;">
  Tall content that may exceed the container height...
</div>

Responsive variants

All overflow utilities support responsive prefixes. See Responsive Utilities for breakpoint details.

<!-- Scroll on mobile, visible on desktop -->
<div class="nys-overflow-auto nys-desktop:nys-overflow-visible">
  Content that scrolls on small screens
</div>

Edit this page on GitHub (Permissions required)

Last updated: July 11, 2026