CSS Overflow

Imagine packing a suitcase. If you only pack a couple of shirts, they fit perfectly. But if you try to squeeze in twenty heavy jackets, the suitcase will overflow and pop open unless you zip it up, use compression straps (hidden), or use an expandable suitcase that adds a sliding zipper (scroll). CSS overflow is that suitcase layout rule. It tells the browser exactly how to handle content when it becomes too large to fit inside its fixed-size container box.

In this page:

Default Visible Overflow
Clipping with Hidden Overflow
Scrolling with Scroll and Auto
Text Truncation with Ellipsis
Containing Floats with Overflow

Default Visible Overflow

By default, browsers treat overflow as visible. If content exceeds its parent container's dimensions, it simply spills out and renders on top of adjacent elements. This prevents your content from being hidden silently.

Note: Use the default visible setting when you want decorative background shapes to spill outside their cards.

Warning: Visible overflow can cause overlapping text blocks that make your website unreadable on mobile screens.

Example: Default Visible Overflow

css

<style>
.box {
  width: 100px;
  height: 50px;
  background: lightyellow;
  border: 2px solid #cc9900;
}
</style>
<div class="box">This text is long enough to spill outside the box's boundaries</div>

Clipping with Hidden Overflow

Setting overflow to hidden instructs the browser to clip any content that exceeds the container's boundaries, making the excess content completely invisible without adding any scrollbars.

Note: Use overflow: hidden to clip nested elements to match your card's rounded corners.

Warning: Hiding overflow can cut off important text or action buttons, making them completely unreachable for your visitors.

Example: Clipping with Hidden Overflow

css

<style>
.box {
  width: 100px;
  height: 50px;
  overflow: hidden;
  background: lightyellow;
  border: 2px solid #cc9900;
}
</style>
<div class="box">This text is long enough that the excess gets clipped away</div>

Scrolling with Scroll and Auto

Setting overflow to scroll forces the browser to add scrollbars to the container. Setting overflow to auto is more efficient, as it tells the browser to add scrollbars automatically only when the content is actually too large to fit.

Note: Always prefer overflow: auto over scroll to prevent empty, unclickable scrollbars from cluttering your layout when content is small.

Warning: Ensure your scrollable elements are easily navigateable on mobile devices with touch screens.

Example: Scrolling with Scroll and Auto

css

<style>
.box {
  width: 150px;
  height: 60px;
  overflow: auto;
  background: lightyellow;
  border: 2px solid #cc9900;
}
</style>
<div class="box">
  <p>Scrollbar appears because this content is actually too tall to fit inside the box.</p>
  <p>Keep scrolling to see the rest of this line.</p>
  <p>Still more content below.</p>
</div>

Text Truncation with Ellipsis

For single-line text overflows, you can combine the text-overflow and overflow properties to append a clean ellipsis (...) automatically, keeping your card layouts looking tidy.

Note: Always pair text-overflow: ellipsis with white-space: nowrap and overflow: hidden to trigger truncation.

Warning: Text-overflow only works on single lines of text; it will not truncate multi-line paragraphs.

Example: Text Truncation with Ellipsis

css

<style>
.truncate {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: lightyellow;
  border: 1px solid #cc9900;
  padding: 4px;
}
</style>
<div class="truncate">This single line of text is too long to fit and gets truncated</div>

Containing Floats with Overflow

A classic CSS layout trick is using overflow: auto or overflow: hidden on parent elements to contain floated children. This establishes a new Block Formatting Context (BFC), forcing the parent container to expand and wrap around its floated children.

Note: Use overflow: auto on parent containers to quickly clear floated children without adding extra code markup.

Warning: Using overflow to contain floats can occasionally add unwanted scrollbars if your nested content is too wide.

Example: Containing Floats with Overflow

css

<style>
.parent {
  overflow: auto;
  background: #eee;
  border: 1px solid #999;
}
.child {
  float: left;
  width: 100px;
  height: 100px;
  background: steelblue;
  color: white;
}
</style>
<div class="parent">
  <div class="child">Floated</div>
</div>

Common Mistakes

Allowing text to spill out and cover adjacent content blocks by neglecting overflow settings.
Hiding overflow (overflow: hidden) on containers with important text or actions, making them unreachable.
Forgetting to combine white-space: nowrap and overflow: hidden when attempting to use text-overflow: ellipsis.

Chapter Summary

The overflow property controls how browsers handle content that exceeds its container's fixed dimensions.
Use overflow: hidden to clip excess content cleanly, and overflow: auto to add scrollbars automatically only when needed.
Control horizontal and vertical overflow separately using overflow-x and overflow-y properties.

Browser Support

The overflow properties, including horizontal and vertical splits, are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Z-index Next Lesson → CSS Float