CSS overflow property
- Previous page outline-width
- Next page overflow-anchor
Definition and Usage
overflow
This attribute specifies what happens when the content overflows the element box.
Description
This property defines how the content of the overflow element content area is handled. If the value is scroll, the user agent will provide a scrolling mechanism regardless of whether it is needed. Therefore, there may be a scrollbar even if all the content can fit in the element box.
See also:
CSS Tutorial:CSS Positioning
HTML DOM Reference Manual:overflow property
Example
Set the overflow property:
div { width:150px; height:150px; overflow:scroll; }
CSS Syntax
overflow: visible|hidden|clip|scroll|auto|initial|inherit;
Attribute Value
Value | Description |
---|---|
visible | Default Value. The content will not be clipped and will be displayed outside the element box. |
hidden | The content will be clipped, and the rest of the content will be invisible. |
scroll | The content will be clipped, but the browser will display a scrollbar to view the rest of the content. |
auto | If the content is clipped, the browser will display a scrollbar to view the rest of the content. |
inherit | Specifies that the overflow property value should be inherited from the parent element. |
Technical Details
Default Value: | visible |
---|---|
Inheritance: | no |
Version: | CSS2 |
JavaScript Syntax: | object.style.overflow="scroll" |
More examples
- How to use scroll bars to display the overflow content within the element
- This example demonstrates how to set the overflow property to specify the corresponding action when the element content is too large to exceed the specified area.
- How to hide the overflow content in overflow elements
- This example demonstrates how to set the overflow property to hide the content when the content in the element is too large to fit the specified area.
- How to set the browser to automatically handle overflow
- This example demonstrates how to set the browser to automatically handle overflow.
Browser support
The numbers in the table indicate the first browser version that fully supports this attribute.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- Previous page outline-width
- Next page overflow-anchor