CSS: Overflow

The overflow property in CSS is used to specify what happens when an element's content is too large to fit into its block formatting context. It can control how overflow content is displayed, whether it should be clipped, display scrollbars, or be made visible outside the element's box.

Syntax

selector {
  overflow: value;
}

Values

• visible: The default value. Content is not clipped and may be rendered outside the element's box.
• hidden: The content is clipped and not visible outside the element's box. No scrollbars are provided.
• scroll: The content is clipped, but scrollbars are added to allow the user to scroll through the content.
• auto: The content is clipped, and scrollbars are added only if necessary (i.e., if the content overflows the element's box).
• inherit: The property takes the same computed value as the property for the element's parent.

Usage Examples

Visible Overflow (default)

html

<div class="visible-box">
  This is some content that is too long to fit in the box.
</div>

css

.visible-box {
  width: 100px;
  height: 100px;
  overflow: visible;
  background-color: lightblue;
}

Hidden Overflow

html

<div class="hidden-box">
  This is some content that is too long to fit in the box.
</div>

css

.hidden-box {
  width: 100px;
  height: 100px;
  overflow: hidden;
  background-color: lightgreen;
}

Scroll Overflow

html

<div class="scroll-box">
  This is some content that is too long to fit in the box.
</div>

css

.scroll-box {
  width: 100px;
  height: 100px;
  overflow: scroll;
  background-color: lightcoral;
}

Auto Overflow

html

<div class="auto-box">
  This is some content that is too long to fit in the box.
</div>

css

.auto-box {
  width: 100px;
  height: 100px;
  overflow: auto;
  background-color: lightyellow;
}

Related Properties

• overflow-x: Controls the horizontal overflow of content. Accepts the same values as overflow.
• overflow-y: Controls the vertical overflow of content. Accepts the same values as overflow.

Examples with overflow-x and overflow-y

Horizontal and Vertical Overflow

html

<div class="overflow-x-box">
  This is some content that is too wide to fit in the box.
</div>

css

.overflow-x-box {
  width: 100px;
  height: 100px;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: lightcyan;
}

Vertical Scroll Only

html

<div class="overflow-y-box">
  This is some content that is too tall to fit in the box.
</div>

css

.overflow-y-box {
  width: 100px;
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: lightpink;
}

Practical Tips

• Use overflow: hidden; to create a clean UI without visible overflow, especially when dealing with fixed-size elements.
• Use overflow: scroll; or overflow: auto; to enable user interaction with overflowing content, particularly in areas like image galleries, long lists, or text areas.
• Combining overflow-x and overflow-y allows for more precise control over overflow behavior in specific directions.

Understanding and effectively using the overflow property can greatly enhance the user experience by ensuring that content is displayed as intended, whether by clipping it, enabling scrolling, or letting it flow outside its container.