CSS overflow Property

The overflow property handles content that exceeds the size of the container.

Options include scroll, visible, hidden and others.

Example

#

An element with overflow 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: 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>
Note: This property only works with block elements of a specified height.

Syntax

overflow: 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 scrollbars 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 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: visible;
  }
</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 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