CSS overflow Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The overflow property specifies whether to clip content, render scroll bars or display overflow content when content overflows the element's content area.
The following table summarizes the usages context and the version history of this property.
| Default value: | visible |
|---|---|
| Applies to: | Block, inline-block and flex containers |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | CSS 2, 3 |
Syntax
The syntax of the property is given with:
The example below shows the overflow property in action.
Example
Try this code »div {
width: 400px;
height: 300px;
overflow: scroll;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
visible |
Content is not clipped; it will be rendered outside the element's box, and may thus overlap other content. This is default value. |
hidden |
Content that overflows the element's box is clipped and the rest of the content will be invisible. |
scroll |
The overflowing content is clipped, just like hidden, but provides a scrolling mechanism to access the overflowed content. |
auto |
If content overflows the element's box it provides scrollbars to see the rest of the content. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element overflow property. |
Browser Compatibility
The overflow property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Overflow.
Related properties: overflow-x, overflow-y, clip, word-wrap.
