CSS overflow Property

What You’ll Learn

The overflow property decides what happens when content is bigger than its container. It is essential for scroll areas, clipped layouts, and clean UI design.

Introduction

The overflow property in CSS controls how content that overflows the bounds of its container is handled.

This property is crucial for managing content that exceeds the dimensions of its container, allowing you to specify how to handle overflowed content in a way that fits your design needs.

Definition and Usage

Use overflow on elements with a defined width or height when content might exceed those limits, such as cards, sidebars, code blocks, and modal bodies.

auto is the most common choice for scrollable panels because scrollbars appear only when needed.

📝 Syntax

The syntax for the overflow property is as follows:

element {
  overflow: value;
}

Here, value can be one of the defined keywords or a combination of values for each axis.

Basic Example

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

Syntax Rules

• Common values: visible, hidden, scroll, and auto.
• The container usually needs a set width, height, or max-size for overflow to matter.
• overflow-x and overflow-y control horizontal and vertical overflow separately.
• auto is usually better than scroll when you want scrollbars only when needed.

🎯 Default Value

The default value of the overflow property is visible, meaning that content overflowing the bounds of the container will be rendered outside the container.

Change it when you want to clip content or add scrolling inside a fixed-size box.

💎 Property Values

Examples Gallery

Manage overflowing text with auto scrollbars, hidden clipping, and value comparisons.

<style>
  .container {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    overflow: auto;
  }
</style>

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

.card {
  width: 240px;
  height: 80px;
  overflow: hidden;
  border-radius: 0.5rem;
}

.panel {
  width: 220px;
  height: 120px;
  overflow: scroll;
}

.visible-box { overflow: visible; }
.hidden-box { overflow: hidden; }

overflow-x and overflow-y

The shorthand overflow sets both axes. Use overflow-x and overflow-y when you want horizontal and vertical behavior to differ.

.code-block {
  overflow-x: auto;
  overflow-y: hidden;
}

♿ Accessibility

• Do not hide important content — Using hidden can remove information from view with no way to scroll to it.
• Ensure scrollable areas are usable — Keyboard users should be able to scroll focusable content inside overflow containers.
• Prefer auto over scroll — when you want scrollbars only when content actually overflows.
• Test small screens — Overflow behavior affects mobile layouts and readability.

💡 Best Practices