The overflow property controls what happens to content that's too large to fit within its container's fixed dimensions, whether it's clipped, scrollable, or simply allowed to spill outside.

Syntax

overflow: visible | hidden | scroll | auto;

Deep Dive Course

visible, the default, lets overflowing content spill outside its container's boundaries with no clipping at all; hidden clips any overflowing content, making it completely invisible with no way to access it; scroll always displays scrollbars, even when content actually fits without needing to scroll; and auto only shows scrollbars when the content genuinely overflows, remaining scrollbar-free otherwise, generally the more polished default choice over scroll. overflow-x and overflow-y let each axis be controlled independently, useful for a container that should scroll vertically but never horizontally, for instance.

1Understanding Overflow

💡

Prefer overflow: auto over overflow: scroll in most cases — auto only shows scrollbars when content genuinely overflows, while scroll always displays them even when unnecessary, which can look visually cluttered for content that happens to fit already.

editor.html

.card {
  height: 200px;
  overflow-y: auto;
}

localhost:3000

2Practical Example

Here is a real-world application of Overflow showing how it is used in production CSS code.

editor.html

.truncated {
  height: 100px;
  overflow: hidden;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Overflow:

1. Use overflow: auto rather than scroll for the more polished default of only showing scrollbars when content genuinely needs to scroll

2. Use overflow: hidden deliberately to intentionally clip content, and be aware it's also commonly used as an unrelated technique to contain floated children or establish a new block formatting context

3. Set overflow-x and overflow-y independently when only one axis, not both, should scroll or clip

⚠️

Tip: Prefer overflow: auto over overflow: scroll in most cases — auto only shows scrollbars when content genuinely overflows, while scroll always displays them even when unnecessary, which can look visually cluttered for content that happens to fit already.

editor.html

.card {
  height: 200px;
  overflow-y: auto;
}

localhost:3000

Examples

Example 01Basic Usage

.card {
  height: 200px;
  overflow-y: auto;
}

Example 02Advanced Example

.truncated {
  height: 100px;
  overflow: hidden;
}

Best Practices

Use overflow: auto rather than scroll for the more polished default of only showing scrollbars when content genuinely needs to scroll
Use overflow: hidden deliberately to intentionally clip content, and be aware it's also commonly used as an unrelated technique to contain floated children or establish a new block formatting context
Set overflow-x and overflow-y independently when only one axis, not both, should scroll or clip

Interview Question

Why does overflow: auto generally look more polished than overflow: scroll for a container whose content usually, but not always, fits within its available space?▼

Hint: Think about what each value actually does when the content genuinely fits without needing to scroll at all.

overflow: scroll unconditionally displays scrollbars on the specified axis at all times, regardless of whether the container's actual content currently needs scrolling or not, which means a container whose content happens to fit comfortably within its available space still shows a scrollbar that serves no functional purpose whatsoever, taking up visual space and potentially looking like a UI mistake or an unnecessary visual element to attentive users. overflow: auto instead intelligently checks whether the content genuinely exceeds the container's available space before deciding whether to show a scrollbar at all, only displaying one when content actually overflows and scrolling is genuinely necessary, and remaining completely scrollbar-free otherwise. For any container whose content amount might vary, sometimes fitting comfortably and sometimes overflowing, auto's conditional behavior produces a visually cleaner, more polished result overall, only ever showing a scrollbar exactly when one is actually functionally needed, rather than scroll's unconditional, sometimes entirely unnecessary display.

Exercises

MediumPractice using Overflow in a real scenario.

View Solution

.card {
  height: 200px;
  overflow-y: auto;
}

Frequently Asked Questions

Why does overflow: auto generally look more polished than overflow: scroll for a container whose content usually, but not always, fits within its available space?▼

Related Functions

RefDimensionsResizeBox-sizing