CSS Overflow

Control extra content and manage layout behavior effectively.

What is CSS Overflow?

CSS Overflow controls what happens when content is too large to fit inside its container.

Sometimes text, images, or elements exceed the given width or height. Overflow helps us manage this situation.

  • Hide extra content
  • Add scrollbars
  • Allow content to flow outside
  • Create clean layouts

Real-Life Example:
A suitcase that is too small for all clothes — something must be hidden or adjusted.

CSS Overflow Property

The overflow property has four main values:

  • visible (default)
  • hidden
  • scroll
  • auto

Overflow: visible

This is the default behavior. Content is allowed to overflow outside the container.

Overflow Visible Example


.box {
    width: 200px;
    height: 100px;
    overflow: visible;
}

The extra content will appear outside the box.

Overflow: hidden

Extra content is hidden and cannot be seen.

Overflow Hidden Example


.box {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

Use Case: Cropping images or hiding unnecessary content.

Overflow: scroll

Scrollbars are always visible, even if content does not overflow.

Overflow Scroll Example


.box {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Users can scroll to see hidden content.

Overflow: auto

Scrollbars appear only when necessary.

Overflow Auto Example


.box {
    width: 200px;
    height: 100px;
    overflow: auto;
}

Best Choice: Most commonly used overflow value.

Overflow-X and Overflow-Y

Control overflow separately for horizontal and vertical directions.

  • overflow-x → horizontal
  • overflow-y → vertical

Directional Overflow


.box {
    overflow-x: hidden;
    overflow-y: scroll;
}

Common Use Cases

  • Scrollable content areas
  • Chat boxes
  • Image cropping
  • Cards with fixed height

Common Mistakes

  • Using overflow without fixed height
  • Hiding important content
  • Forgetting mobile scrolling behavior

Best Practices for CSS Overflow

  • Use overflow: auto in most cases
  • Ensure content readability
  • Combine with height and width
  • Test on mobile devices

Pro Tip: Overflow should manage content — not confuse users.