Style overflow property

Definition and usage

overflow Property settings or return how to handle the content rendered 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 the overflow property to scroll overflowing content:

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

Try it yourself

Example 2

Use the overflow property to hide overflowing 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 is not cut, may appear outside the element box. Default.
hidden Do not display content outside the element box.
scroll Add a scrollbar and cut content as necessary.
auto Cut 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: A string representing 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