CSS overflow Property

CSS overflow property specifies that how to manage, when content overflows the content box such as visible, hidden, scroll, and auto.

Usages

The following table outline the usages and version history of this property.

Default value: inline
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.overflow = "scroll"

Syntax

Here is a syntax for the CSS overflow property

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

Property Values

The following table describes the values of this property.

Value Description
visible Default. Specifies that content is not clipped, however content is displayed outside of the content box
hidden Specifies that content is clipped, and overflow content is hidden
scroll Specifies that content is clipped, and overflow content is visible on scroll bars
auto Browser itself decide what to do with the overflow content
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets overflow property.

div.one {
  overflow: auto;
}
div.two {
  overflow: hidden;
}
div.three {
  overflow: scroll;
}
div.four {
  overflow: visible;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 7+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.