CSS overflow-x Property

What You’ll Learn

The overflow-x property controls what happens when content is wider than its container. It is essential for horizontal scroll areas, wide tables, and responsive layouts.

Introduction

The overflow-x property in CSS controls what happens to the content when it overflows the horizontal bounds of its container.

This property is particularly useful for managing horizontal scrolling and ensuring that overflowing content is handled gracefully.

It applies only to the horizontal axis, as opposed to the more general overflow property, which sets behavior for both axes at once.

Definition and Usage

Use overflow-x on elements with a defined width when content might exceed that width, such as data tables, code blocks, image carousels, and wide navigation strips.

overflow-x: auto is the most common choice because a horizontal scrollbar appears only when content actually overflows.

📝 Syntax

The syntax for the overflow-x property is as follows:

element {
  overflow-x: value;
}

Here, value can be one of the predefined keywords described below.

Basic Example

.container {
  width: 300px;
  overflow-x: auto;
}

Syntax Rules

• Accepted values: visible, hidden, scroll, auto, and clip.
• The container usually needs a set width or max-width for horizontal overflow to matter.
• overflow-x controls only the horizontal axis; pair it with overflow-y for vertical behavior.
• auto is usually better than scroll when you want scrollbars only when needed.

🎯 Default Value

The default value of the overflow-x property is visible. This means that if the content overflows horizontally, it will not be clipped and will instead be visible beyond the bounds of its container.

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

💎 Property Values

Examples Gallery

Scroll wide content horizontally, clip overflow, compare scrollbar behavior, and build responsive data tables.

<style>
  .container {
    width: 300px;
    border: 1px solid #000;
    overflow-x: auto;
  }
  .content {
    width: 600px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <div class="content">
    This is wide content that overflows the container. Adjust the overflow-x property to see the effect!
  </div>
</div>

.strip {
  width: 280px;
  overflow-x: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.panel {
  width: 240px;
  overflow-x: scroll;
}
.panel-inner {
  width: 480px;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
}
table {
  min-width: 640px;
  width: 100%;
  border-collapse: collapse;
}

overflow vs overflow-x vs overflow-y

The shorthand overflow sets both axes at once. Use overflow-x and overflow-y when horizontal and vertical behavior should differ.

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

♿ Accessibility

• Do not hide important content — Using overflow-x: 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 horizontal overflow containers.
• Prefer auto over scroll — when you want horizontal scrollbars only when content actually overflows.
• Test small screens — Horizontal overflow behavior affects mobile layouts and table readability.

💡 Best Practices