Style overflow Property

Definition and Usage

overflow How to set or return the handling of 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

Example

Example 1

Use overflow property to scroll overflow content：

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

Try It Yourself

Example 2

Use overflow property to hide overflow content：

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

Try It Yourself

Example 3

Return overflow property：

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

Try It Yourself

Syntax

Return overflow property：

object.style.overflow

Set overflow property：

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

Attribute Value

Value Description
visible Content will not be cropped and may appear outside the element box. Default.
hidden Do not display content outside the element box.
scroll Add a scrollbar and crop content as necessary.
auto Trim content as necessary and add a scrollbar.
initial Set this property to its default value. See initial。
inherit Inherit this property from its parent element. See inherit。

Technical Details

Default value： visible
Return value： String that represents 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