Style Overflow Attribute

Definition and Usage

overflow How to set or return the attribute to handle the content displayed outside the element box.

Tip:To hide the entire document's scrollbar, use the overflow property of the body or html element.

See Also:

CSS Tutorial:CSS Overflow

CSS Tutorial:CSS Positioning

CSS Reference Manual:Overflow Property

Instance

Example 1

Use the overflow property to scroll overflow content:

document.getElementById("myDIV").style.overflow = "scroll";

Try It Yourself

Example 2

Use the overflow property to hide overflow content:

document.getElementById("myDiv").style.overflow = "hidden";

Try It Yourself

Example 3

Returns the overflow property:

alert(document.getElementById("myDiv").style.overflow);

Try It Yourself

Syntax

Returns the overflow property:

object.style.overflow

Sets the overflow property:

object.style.overflow = "visible|hidden|scroll|auto|initial|inherit"

Attribute Value

Value Description
visible The content is not trimmed and may appear outside the element box. Default.
hidden Does not display the content outside the element box.
scroll Adds a scrollbar and trims the content as necessary.
auto Trims the content as necessary and adds a scrollbar.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default value: visible
Return value: A string that indicates the content rendered outside the element box.
CSS Version: CSS2

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support