CSS overflow-x Property

The overflow-x property handles content that exceeds the container width (x-direction)

Possible values include hidden, visible, scroll and others.

Example

#

An element with overflow-x set to scroll.

Matisse was born in Le Cateau-Cambrésis, in the Nord department in Northern France, the oldest son of a wealthy grain merchant. He grew up in Bohain-en-Vermandois, Picardie, France. In 1887, he went to Paris to study law, working as a court administrator in Le Cateau-Cambrésis after gaining his qualification. He first started to paint in 1889, after his mother brought him art supplies during a period of convalescence following an attack of appendicitis. He discovered "a kind of paradise" as he later described it, and decided to become an artist, deeply disappointing his father.
<style>
  .flow {
    background-color: aliceblue;
    max-width: 400px;
    height: 175px;
    padding: 15px;
    overflow-x: scroll;
  }
</style>

<div class="flow">
  Matisse was born in Le Cateau-Cambrésis,
  in the Nord department in Northern France,
  the oldest son of a wealthy grain merchant.
  He grew up in Bohain-en-Vermandois, Picardie,
  France. In 1887, he went to Paris to study
  law, working as a court administrator in
  Le Cateau-Cambrésis after gaining his
  qualification. He first started to paint
  in 1889, after his mother brought him art
  supplies during a period of convalescence
  following an attack of appendicitis. He
  discovered "a kind of paradise" as he later
  described it, and decided to become an
  artist, deeply disappointing his father.
</div>

Syntax

overflow-x: visible | hidden | scroll | 
            auto | initial | inherit;

Values

#

Value Description
visible Default. Does not clip overflowing content.
hidden Hides (clips) overflowing content.
scroll Clips overflowing content and shows a horizontal scrollbar all the time.
auto If there is overflowing content it shows a scrollbar.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different overflow-x values.

Matisse was born in Le Cateau-Cambrésis, in the Nord department in Northern France, the oldest son of a wealthy grain merchant. He grew up in Bohain-en-Vermandois, Picardie, France. In 1887, he went to Paris to study law, working as a court administrator in Le Cateau-Cambrésis after gaining his qualification. He first started to paint in 1889, after his mother brought him art supplies during a period of convalescence following an attack of appendicitis. He discovered "a kind of paradise" as he later described it, and decided to become an artist, deeply disappointing his father.
<style>
  .flow-example {
    background-color: aliceblue;
    max-width: 400px;
    max-height: 150px;
    padding: 15px;
    overflow-x: hidden;
  }
</style>

<div class="flow-example">
  Matisse was born in Le Cateau-Cambrésis,
  in the Nord department in Northern France,
  the oldest son of a wealthy grain merchant.
  He grew up in Bohain-en-Vermandois, Picardie,
  France. In 1887, he went to Paris to study
  law, working as a court administrator in
  Le Cateau-Cambrésis after gaining his
  qualification. He first started to paint
  in 1889, after his mother brought him art
  supplies during a period of convalescence
  following an attack of appendicitis. He
  discovered "a kind of paradise" as he later
  described it, and decided to become an
  artist, deeply disappointing his father.
</div>

Browser support

This table shows when overflow-x support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
7 Jan 2003
Safari
1.0 Jun 2003

You may also like

Guides