The overflow-x property handles content that exceeds the container width (x-direction)
Possible values include hidden, visible, scroll and others.
An element with overflow-x set to scroll.
<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>
overflow-x: visible | hidden | scroll |
auto | initial | inherit;
| 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. |
Click the buttons to see the different overflow-x values.
<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>
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 |
