86 Contributors: 10 Wednesday, August 2, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial:
Roadmap: roadmap



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


Overflow ValueDetails
visibleShows all overflowing content outside the element
scrollHides the overflowing content and adds a scroll bar
hiddenHides the overflowing content, both scroll bars disappear and the page becomes fixed
autoSame as scroll if content overflows, but doesn't add scroll bar if content fits
inheritInherit's the parent element's value for this property


The overflow property specifies whether to clip content, render scrollbars, or stretch a container to display content when it overflows its block level container.

When an element is too small to display it's contents, what happens? By default, the content will just overflow and display outside the element. That makes your work look bad. You want your work to look good, so you set the overflow property to handle the overflowing content in a desirable way.

Values for the overflow property are identical to those for the overflow-x and overflow-y properties, exept that they apply along each axis

The overflow-wrap property has also been known as the word-wrap property.

Important note: Using the overflow property with a value different to visible will create a new block formatting context.

Related Examples