CSS reference manual

CSS @rules (RULES)

CSS attributes in full

CSS3 overflow-x Attribute CSS outline-width Attribute

CSS overflow Attribute Usage and Example

How to Use and Example of CSS overflow Attribute

The following table provides usage descriptions and version histories of this attribute, as well as its usage syntax in JavaScript scripts.

Default Value:	visible
Applies To:	Block, inline-block and flex containers
Inheritance:	None
Animatable:	No.Please see Animation Attributes.
Version:	CSS 2,3
JavaScript Syntax:	object.style.overflow="scroll"

Overflow Usage Syntax

The syntax of this attribute is as follows:

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

The following example demonstrates how to use the overflow attribute.

Example

　　div {
　　　width:　400px;
　　　height:　300px;
　　　overflow: scroll;
　　}

Test See‹/›

Attribute Value

The following table describes the values of this attribute.

Value	Description
visible	The content is not clipped; it will be rendered outside the element's box, so it may overlap with other content. This is the default value.
hidden	The content of the overflow element's box will be clipped, and the rest of the content will be invisible.
scroll	The overflow content is clipped as if hidden, but a scrolling mechanism is provided to access the overflow content.
auto	If the content overflows the element's box, it will provide a scrollbar to view the remaining content.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements will adopt the overflow attribute value of their parent element.

Browser Compatibility

The compatibility of overflow attribute in browsers, the numbers in the following table represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+