HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Show different overflow property values
The overflow
property specifies what should happen if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
overflow
property only works for block elements with a specified height.
Default value: | visible |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS2 |
JavaScript syntax: | object.style.overflow="scroll" Try it |
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
overflow | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Value | Description | Demo |
---|---|---|
visible | The overflow is not clipped. It renders outside the element's box. This is default | Demo ❯ |
hidden | The overflow is clipped, and the rest of the content will be invisible. Content can be scrolled programmatically (e.g. by setting scrollLeft or scrollTo()) | Demo ❯ |
clip | The overflow is clipped, and the rest of the content will be invisible. Forbids scrolling, including programmatic scrolling. | Demo ❯ |
scroll | The overflow is clipped, but a scroll-bar is added to see the rest of the content | Demo ❯ |
auto | If overflow is clipped, a scroll-bar should be added to see the rest of the content | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
CSS tutorial: CSS Overflow
CSS tutorial: CSS Positioning
HTML DOM reference: overflow property