CSS Overflow Property

Interactive Demo

What is Overflow?

The overflow property in CSS controls what happens to content that exceeds the boundaries of its container. You can choose whether the overflowing content is visible, hidden, clipped, or scrollable. This property is essential for managing layouts and preventing unwanted content spillover.

Overflow Types

Visual Example: Visible

This is some long content that will overflow the container depending on the overflow property applied. Scroll or hide me!

CSS Code

.visible-container {
  overflow: visible;
  background: #3b82f6;
}

Key Points

Default overflow behavior
Overflowing content is visible outside the container
No clipping or scrollbars