Overflow

Control content overflow and overscroll behavior on an element or axis.

Choose whether oversized content is clipped, visible, or scrollable. Use x/y forms when each axis needs a different rule. Overscroll utilities decide whether a scroll gesture can chain from an inner scroller to its parent at an edge.

Quick reference

Example class	Expected declarations
`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-scroll`	`overflow-x: scroll;`
`overflow-y-scroll`	`overflow-y: scroll;`
`overflow-y-auto`	`overflow-y: auto;`
`overscroll-auto`	`overscroll-behavior: auto;`
`overscroll-none`	`overscroll-behavior: none;`
`overscroll-contain`	`overscroll-behavior: contain;`
`overscroll-x-contain`	`overscroll-behavior-x: contain;`
`overscroll-y-contain`	`overscroll-behavior-y: contain;`
`overscroll-y-none`	`overscroll-behavior-y: none;`

Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Clip or reveal overflow

hidden and clip cut off content outside the frame; visible allows the child to extend beyond it.

Clip or reveal overflow

HTML

<div class="wind-demo">
  <p class="wind-demo-note">Compare clipping, clipping at the edge, and allowing overflow to show.</p>
  <div class="wind-demo-frame w-40 overflow-hidden"><div class="wind-demo-tile w-64">overflow-hidden clips this wide child</div></div>
  <div class="wind-demo-frame w-40 overflow-clip"><div class="wind-demo-tile w-64">overflow-clip also clips</div></div>
  <div class="wind-demo-frame w-40 overflow-visible"><div class="wind-demo-tile w-64">overflow-visible shows the wide child</div></div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.w-40 {
  width: 10rem;
}
.w-64 {
  width: 16rem;
}
.overflow-clip {
  overflow: clip;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "overflow-clip",
        "overflow-hidden",
        "overflow-visible",
        "w-40",
        "w-64"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Scroll on one or both axes

overflow-x-auto scrolls the long row only when needed; overflow-x-scroll requests a horizontal scroll area, overflow-y-scroll always enables vertical scrolling, and overflow-scroll applies to both axes.

Scroll on one or both axes

HTML

<div class="wind-demo">
  <p class="wind-demo-note">Use one axis when only one direction should scroll.</p>
  <div class="wind-demo-frame w-48 overflow-auto overflow-x-auto">
    <div class="wind-demo-tile w-max">Horizontal content: one long row continues past the frame</div>
  </div>
  <div class="wind-demo-frame w-48 overflow-x-scroll"><div class="wind-demo-tile w-max">Always scrollable horizontal track</div></div>
  <div class="wind-demo-frame h-24 w-48 overflow-auto overflow-y-scroll">
    <div class="wind-demo-tile">First row</div><div class="wind-demo-tile">Second row</div><div class="wind-demo-tile">Third row</div><div class="wind-demo-tile">Fourth row</div>
  </div>
  <div class="wind-demo-frame h-24 w-48 overflow-scroll">Scroll is enabled on both axes; content can continue here.</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.h-24 {
  height: 6rem;
}
.w-48 {
  width: 12rem;
}
.w-max {
  width: max-content;
}
.overflow-auto {
  overflow: auto;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "h-24",
        "overflow-auto",
        "overflow-scroll",
        "overflow-x-auto",
        "overflow-x-scroll",
        "overflow-y-scroll",
        "w-48",
        "w-max"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Control scroll chaining

The inner vertical and horizontal scrollers use contain so gestures stop at their boundaries instead of moving the outer panel; none also disables boundary bounce where supported.

Control scroll chaining

HTML

<div class="wind-demo">
  <p class="wind-demo-note">Contain scroll gestures at an inner boundary so they do not chain to the outer panel.</p>
  <div class="wind-demo-frame h-36 w-64 overflow-y-auto overscroll-auto overscroll-y-auto">
    <div class="wind-demo-frame h-24 overflow-y-auto overscroll-contain overscroll-y-contain">
      <div class="wind-demo-tile">Inner scroll area</div><div class="wind-demo-tile">More inner content</div><div class="wind-demo-tile">End of inner area</div>
    </div>
    <div class="wind-demo-tile">Outer content continues</div><div class="wind-demo-tile">Outer end</div>
  </div>
  <div class="wind-demo-frame h-24 w-64 overflow-x-auto overscroll-x-contain">
    <div class="wind-demo-tile w-max">Horizontal boundary is contained</div>
  </div>
  <div class="wind-demo-frame h-24 overflow-y-auto overscroll-none overscroll-y-none">
    <div class="wind-demo-tile">Overscroll none</div><div class="wind-demo-tile">More content</div><div class="wind-demo-tile">End</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.h-24 {
  height: 6rem;
}
.h-36 {
  height: 9rem;
}
.w-64 {
  width: 16rem;
}
.w-max {
  width: max-content;
}
.overscroll-auto {
  overscroll-behavior: auto;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.overscroll-none {
  overscroll-behavior: none;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overscroll-x-contain {
  overscroll-behavior-x: contain;
}
.overscroll-y-auto {
  overscroll-behavior-y: auto;
}
.overscroll-y-contain {
  overscroll-behavior-y: contain;
}
.overscroll-y-none {
  overscroll-behavior-y: none;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "h-24",
        "h-36",
        "overflow-x-auto",
        "overflow-y-auto",
        "overscroll-auto",
        "overscroll-contain",
        "overscroll-none",
        "overscroll-x-contain",
        "overscroll-y-auto",
        "overscroll-y-contain",
        "overscroll-y-none",
        "w-64",
        "w-max"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Custom and named values

overflow accepts auto, hidden, clip, visible, and scroll; the x/y forms accept the same values. auto adds scrolling only when needed, while scroll requests a scroll container even when content fits. overscroll accepts auto, contain, or none on both or one axis. These utilities have fixed keywords and no token or arbitrary values.

Related guides: Utility grammar · Variants

Catalog details

overflow

Field	Value
Catalog identifier	`v1.overflow`
Class pattern	`overflow-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`5`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`overflow` (`13`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`overflow`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"auto"`	`"auto"`
`keyword`	`"hidden"`	`"hidden"`
`keyword`	`"clip"`	`"clip"`
`keyword`	`"visible"`	`"visible"`
`keyword`	`"scroll"`	`"scroll"`

Declaration templates

Property	Value kind	Fixed value
`overflow`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`overflow-auto`	`overflow: auto`

overscroll

Field	Value
Catalog identifier	`v1.overscroll`
Class pattern	`overscroll-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`overflow` (`13`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`overscroll-behavior`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"auto"`	`"auto"`
`keyword`	`"contain"`	`"contain"`
`keyword`	`"none"`	`"none"`

Declaration templates

Property	Value kind	Fixed value
`overscroll-behavior`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`overscroll-auto`	`overscroll-behavior: auto`

overflow-x

Field	Value
Catalog identifier	`v1.overflow-x`
Class pattern	`overflow-x-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`5`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`overflow` (`13`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`overflow-x`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"auto"`	`"auto"`
`keyword`	`"hidden"`	`"hidden"`
`keyword`	`"clip"`	`"clip"`
`keyword`	`"visible"`	`"visible"`
`keyword`	`"scroll"`	`"scroll"`

Declaration templates

Property	Value kind	Fixed value
`overflow-x`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`overflow-x-auto`	`overflow-x: auto`

overflow-y

Field	Value
Catalog identifier	`v1.overflow-y`
Class pattern	`overflow-y-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`5`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`overflow` (`13`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`overflow-y`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"auto"`	`"auto"`
`keyword`	`"hidden"`	`"hidden"`
`keyword`	`"clip"`	`"clip"`
`keyword`	`"visible"`	`"visible"`
`keyword`	`"scroll"`	`"scroll"`

Declaration templates

Property	Value kind	Fixed value
`overflow-y`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`overflow-y-auto`	`overflow-y: auto`

overscroll-x

Field	Value
Catalog identifier	`v1.overscroll-x`
Class pattern	`overscroll-x-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`overflow` (`13`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`overscroll-behavior-x`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"auto"`	`"auto"`
`keyword`	`"contain"`	`"contain"`
`keyword`	`"none"`	`"none"`

Declaration templates

Property	Value kind	Fixed value
`overscroll-behavior-x`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`overscroll-x-auto`	`overscroll-behavior-x: auto`

overscroll-y

Field	Value
Catalog identifier	`v1.overscroll-y`
Class pattern	`overscroll-y-<suffix>`
Grammar	`{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`overflow` (`13`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`overscroll-behavior-y`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"auto"`	`"auto"`
`keyword`	`"contain"`	`"contain"`
`keyword`	`"none"`	`"none"`

Declaration templates

Property	Value kind	Fixed value
`overscroll-behavior-y`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`overscroll-y-auto`	`overscroll-behavior-y: auto`

Overflow

Quick reference

Examples in use

Clip or reveal overflow

Scroll on one or both axes

Control scroll chaining

Custom and named values

overflow

Accepted values

Declaration templates

Catalog examples

overscroll

Accepted values

Declaration templates

Catalog examples

overflow-x

Accepted values

Declaration templates

Catalog examples

overflow-y

Accepted values

Declaration templates

Catalog examples

overscroll-x

Accepted values

Declaration templates

Catalog examples

overscroll-y

Accepted values

Declaration templates

Catalog examples

Revision History