Overflow Property
Last updated: 2026-09-13
overflow Overflow Property
The overflow property controls what happens when content exceeds its container's bounds and is the core tool for dealing with overflowing content. The default value, visible, lets overflowing content show; hidden clips it; scroll always displays scrollbars; and auto shows scrollbars only when needed, which is the most commonly used value.
| Category | |
|---|---|
| Initial Value | visible |
| Inherited | No |
| Applies To | block-container |
| Animation Type | discrete |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
overflow: visible | hidden | clip | scroll | auto;⚙️ Values
| Value | Type | Description |
|---|---|---|
visible | hidden | scroll | auto | Keyword | How overflowing content is handled. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| Supported in all major browsers | |||||
Tip： overflow:hidden or auto creates a new block formatting context (BFC), which can also be used to clear floats.
❓ FAQ
QWhat's the difference between overflow:auto and overflow:scroll?
Ascroll always shows scrollbars, even when content does not overflow, and reserves scrollbar space in both directions. auto shows scrollbars only when content actually overflows and hides them entirely otherwise, which looks cleaner. For most use cases, auto is recommended. Note that both confine content to the box, so elements inside the scrollable area cannot scroll past the parent, and neither prevents the page itself from scrolling.
QHow do I make content scrollable when it overflows?
AFirst give the container a definite height using height or max-height, then set overflow:auto or scroll. Once content exceeds the container's size it can be scrolled into view, for example .list { height:300px; overflow:auto; }. For whole-page scrolling, do not restrict overflow on html or body, or the page will lose its default scrolling behavior. Also make sure the container's width is constrained, since horizontal overflow is a common side effect.
QWhy does overflow:hidden clear floats?
AWhen overflow is set to hidden, auto, scroll, or clip, the element creates a block formatting context (BFC). A BFC takes the height of its floated children into account, fixing the collapsed-parent problem. That is why adding overflow:hidden to a float's parent is a classic clearing technique; just keep in mind that it also clips any overflowing content, which may cut off dropdowns or tooltips that extend beyond the box.
QWhat's the difference between overflow:hidden and overflow:visible?
Avisible, the default, renders overflowing content outside the box; it does not affect layout but may cover neighboring elements. hidden clips the overflow so the content is invisible and cannot be scrolled into view. hidden is commonly used to create a BFC, to clip content within rounded corners via border-radius, and to hide decorative overflow, while visible is best left for cases where overflow genuinely should escape the container.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
