CSS · Fundamentals

CSS Overflow

Control what happens when content is too large for its container

Find videos you like?

Save to resource drawer for future reference!

What is Overflow?

Handling content that doesn't fit

The Overflow Problem

When content is larger than its container (fixed height/width), it overflows. The overflow property controls what happens: show it, hide it, add scrollbars, or clip it.

Common Scenario

You have a fixed-height card with dynamic content. What happens when the text is too long?

visible

Content spills out (messy!)

hidden

Content gets cut off

scroll

Scrollbars appear

auto

Scrollbars only if needed

Four Overflow Values

Different ways to handle overflowing content

visible

Default Behavior

Content overflows and is visible outside the container. Can break layout!

overflow: visible;

⚠️ Usually not desired - content spills out

hidden

Clip Content

Content is clipped - anything outside the box is hidden. No scrollbars.

overflow: hidden;

⚠️ Content is lost - user can't see it

scroll

Always Scrollbars

Scrollbars are always shown, even if content fits. Both axes get scrollbars.

overflow: scroll;

ℹ️ Scrollbars always visible (can look odd)

auto

⭐ Recommended

Smart Scrollbars

Scrollbars appear only when needed. Most commonly used value.

overflow: auto;

✅ Best choice - shows scrollbars only if needed

Interactive Overflow Demo

See all four overflow values in action

Overflow Values Comparison

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>📦 Overflow Property Demo</h1>
      <div class="grid">
        <div class="box">
          <div class="label label-visible">overflow: visible</div>
          <div class="content-box visible">
            This is a lot of content that doesn't fit in the box.
            Notice how it overflows and spills outside the container.
            This can break your layout and overlap other elements.
            Generally not recommended for production use.
          </div>
          <div class="note">Content spills out</div>
        </div>
        <div class="box">
          <div class="label label-hidden">overflow: hidden</div>
          <div class="content-box hidden">
            This is a lot of content that doesn't fit in the box.
            The overflow is hidden - you can't see the rest of the text.
            No scrollbars appear. Content is simply clipped at the boundary.
          </div>
          <div class="note">Content is clipped</div>
        </div>
        <div class="box">
          <div class="label label-scroll">overflow: scroll</div>
          <div class="content-box scroll">
            This is a lot of content that doesn't fit in the box.
            Scrollbars are always shown on both axes, even if content fits.
            You can scroll to see all the content.
          </div>
          <div class="note">Always has scrollbars</div>
        </div>
        <div class="box">
          <div class="label label-auto">overflow: auto ⭐</div>
          <div class="content-box auto">
            This is a lot of content that doesn't fit in the box.
            Scrollbars appear only when needed. This is the most commonly
            used value because it's smart and doesn't add unnecessary scrollbars.
          </div>
          <div class="note">Smart scrollbars</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Directional Overflow

Control overflow on X and Y axes separately

You can control horizontal and vertical overflow independently usingoverflow-x andoverflow-y.

overflow-x

Horizontal Overflow

Controls overflow on the X-axis (left/right)

overflow-x: auto;
overflow-y: hidden;

Example: Horizontal scrolling tables

overflow-y

Vertical Overflow

Controls overflow on the Y-axis (top/bottom)

overflow-x: hidden;
overflow-y: auto;

Example: Scrollable chat windows

Common Pattern

Often used for responsive tables:overflow-x: auto allows horizontal scrolling on mobile while preventing vertical scroll.

Remember

overflow: auto is the most common choice (smart scrollbars)

overflow: hidden clips content (useful for image containers)

Use overflow-x and overflow-y for directional control

Avoid overflow: visible on fixed-height containers

Previous Topic

Box Sizing

Content-box vs border-box, box-sizing property, and layout calculations.

Next Topic

Visibility & Opacity

Visibility, opacity, pointer-events, and element hiding techniques.

Ask a Question

Have a question about Overflow? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Fundamentals

CSS Overflow

Control what happens when content is too large for its container

Find videos you like?

Save to resource drawer for future reference!

What is Overflow?

Handling content that doesn't fit

The Overflow Problem

When content is larger than its container (fixed height/width), it overflows. The overflow property controls what happens: show it, hide it, add scrollbars, or clip it.

Common Scenario

You have a fixed-height card with dynamic content. What happens when the text is too long?

visible

Content spills out (messy!)

hidden

Content gets cut off

scroll

Scrollbars appear

auto

Scrollbars only if needed

Four Overflow Values

Different ways to handle overflowing content

visible

Default Behavior

Content overflows and is visible outside the container. Can break layout!

overflow: visible;

⚠️ Usually not desired - content spills out

hidden

Clip Content

Content is clipped - anything outside the box is hidden. No scrollbars.

overflow: hidden;

⚠️ Content is lost - user can't see it

scroll

Always Scrollbars

Scrollbars are always shown, even if content fits. Both axes get scrollbars.

overflow: scroll;

ℹ️ Scrollbars always visible (can look odd)

auto

⭐ Recommended

Smart Scrollbars

Scrollbars appear only when needed. Most commonly used value.

overflow: auto;

✅ Best choice - shows scrollbars only if needed

Interactive Overflow Demo

See all four overflow values in action

Overflow Values Comparison

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>📦 Overflow Property Demo</h1>
      <div class="grid">
        <div class="box">
          <div class="label label-visible">overflow: visible</div>
          <div class="content-box visible">
            This is a lot of content that doesn't fit in the box.
            Notice how it overflows and spills outside the container.
            This can break your layout and overlap other elements.
            Generally not recommended for production use.
          </div>
          <div class="note">Content spills out</div>
        </div>
        <div class="box">
          <div class="label label-hidden">overflow: hidden</div>
          <div class="content-box hidden">
            This is a lot of content that doesn't fit in the box.
            The overflow is hidden - you can't see the rest of the text.
            No scrollbars appear. Content is simply clipped at the boundary.
          </div>
          <div class="note">Content is clipped</div>
        </div>
        <div class="box">
          <div class="label label-scroll">overflow: scroll</div>
          <div class="content-box scroll">
            This is a lot of content that doesn't fit in the box.
            Scrollbars are always shown on both axes, even if content fits.
            You can scroll to see all the content.
          </div>
          <div class="note">Always has scrollbars</div>
        </div>
        <div class="box">
          <div class="label label-auto">overflow: auto ⭐</div>
          <div class="content-box auto">
            This is a lot of content that doesn't fit in the box.
            Scrollbars appear only when needed. This is the most commonly
            used value because it's smart and doesn't add unnecessary scrollbars.
          </div>
          <div class="note">Smart scrollbars</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Directional Overflow

Control overflow on X and Y axes separately

You can control horizontal and vertical overflow independently usingoverflow-x andoverflow-y.

overflow-x

Horizontal Overflow

Controls overflow on the X-axis (left/right)

overflow-x: auto;
overflow-y: hidden;

Example: Horizontal scrolling tables

overflow-y

Vertical Overflow

Controls overflow on the Y-axis (top/bottom)

overflow-x: hidden;
overflow-y: auto;

Example: Scrollable chat windows

Common Pattern

Often used for responsive tables:overflow-x: auto allows horizontal scrolling on mobile while preventing vertical scroll.

Remember

overflow: auto is the most common choice (smart scrollbars)

overflow: hidden clips content (useful for image containers)

Use overflow-x and overflow-y for directional control

Avoid overflow: visible on fixed-height containers

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Box Sizing

Visibility & Opacity

Building Your Learning Module...

CSS Overflow

The Overflow Problem

Common Scenario

Default Behavior

Clip Content

Always Scrollbars

Smart Scrollbars

Overflow Values Comparison

Horizontal Overflow

Vertical Overflow

Common Pattern

Remember

Box Sizing

Visibility & Opacity

CSS Overflow

The Overflow Problem

Common Scenario

Default Behavior

Clip Content

Always Scrollbars

Smart Scrollbars

Overflow Values Comparison

Horizontal Overflow

Vertical Overflow

Common Pattern

Remember