CSS overflow-x Property

Definition and Usage

The overflow-x property controls what happens when content overflows a block-level element’s left and right edges. You can let it paint outside, clip it, or allow horizontal scrolling.

The initial value is visible. It is the horizontal half of the overflow shorthand; pair it with overflow-y when axes must differ. The box needs a limited width (or similar constraint) or nothing overflows horizontally.

CSS Syntax

Property Values

How to Use overflow-x

Constrain width first, then choose how horizontal overflow should behave.

1. Give the element a limited width or max-width.
2. Put content inside that is wider than that limit (a long string or a wide child).
3. Set overflow-x to auto, scroll, hidden, clip, or visible.
4. Set overflow-y separately when vertical behavior must differ, or use the overflow shorthand for both axes.

Live Preview

A narrow box holds one long line. Change overflow-x and watch how the extra width behaves.

CSS Examples

Each snippet focuses on overflow-x. The fixed width is only there so content can overflow horizontally. Use Try It Yourself for a live editor.

<style>
  div {
    width: 180px;
    overflow-x: auto;
    border: 1px solid #cbd5e1;
    padding: 8px;
    white-space: nowrap;
  }
</style>

<div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div>

<style>
  div {
    width: 180px;
    overflow-x: hidden;
    border: 1px solid #cbd5e1;
    padding: 8px;
    white-space: nowrap;
  }
</style>

<div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div>

<style>
  div {
    width: 180px;
    overflow-x: scroll;
    border: 1px solid #cbd5e1;
    padding: 8px;
    white-space: nowrap;
  }
</style>

<div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div>

Key Takeaways