CSS overflow Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The overflow property controls what happens to content that extends beyond the edges of an element’s content box. It determines whether that extra content is clipped, allowed to be visible outside the box, or handled by a scrolling mechanism, and it therefore governs the visible boundary of an element. Because it changes how overflowing content is presented, it is often used to create scrollable regions, to hide incidental content, or to ensure that an element visually contains its children.

Beyond the visible results, overflow affects layout behavior and painting. For example, certain display configurations interact with overflow to determine whether an element forms an independent formatting context; in practical terms, applying overflow can stop children’s floats from escaping the parent and can change how siblings are laid out. It also interacts with positioning: an element’s stacking and clipping relative to positioned ancestors can be influenced when overflow changes how the element is painted, so consider how position and overflow work together when layering or masking content.

In real-world use, overflow is commonly used to create contained scroll areas, to hide scrollable or decorative content, and to constrain complex widgets. For finer control across axes there are related axis-specific properties such as overflow-x and overflow-y, which allow independent handling on the horizontal and vertical axes. Keep in mind accessibility and performance: scrollable regions should remain keyboard and screen-reader accessible, and many layouts with nested scrolling or heavy repainting can have performance implications depending on the way overflow is used.

Definition

Initial value: See individual properties
Applies to: Block containers
Inherited: No
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.overflow

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

overflow: visible | hidden | scroll | auto

Values

visibleContent is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.
hiddenContent that exceeds the dimensions of the object is not shown.
scrollContent is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
autoContent is clipped and scrolling is added only when necessary.

Example

HTML

<div class='container'>

  <h1>CSS overflow examples</h1>

  <div class='examples'>

    <div class='box example visible'>

      <h2>overflow: visible</h2>

      <div class='content'>This content is larger than the box so it will overflow and remain visible. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod.</div>

    </div>

    <div class='box example hidden'>

      <h2>overflow: hidden</h2>

      <div class='content'>This content is larger than the box so it will be clipped and hidden. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

    </div>

    <div class='box example scroll'>

      <h2>overflow: scroll</h2>

      <div class='content'>This content is larger than the box so scrollbars always appear. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae.</div>

    </div>

    <div class='box example auto'>

      <h2>overflow: auto</h2>

      <div class='content'>This content is larger so scrollbars appear only when needed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum.</div>

    </div>

  </div>

</div>

CSS

/* CSS styles */
* { box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.container { max-width: 960px; margin: 24px auto; padding: 16px; }
h1 { margin-bottom: 16px; font-size: 20px; }
.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.box { border: 1px solid #ccc; padding: 8px; background: #fafafa; border-radius: 6px; }
.box h2 { font-size: 14px; margin: 0 0 8px 0; }
.box .content { width: 200px; height: 60px; padding: 8px; background: #fff; border: 1px dashed #ddd; overflow: visible; }
.box.hidden .content { overflow: hidden; }
.box.scroll .content { overflow: scroll; }
.box.auto .content { overflow: auto; }
.box.visible .content { overflow: visible; }
.content { white-space: normal; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS overflow property. Hover over a browser icon to see the version that first introduced support for this CSS property.