Sometimes, the content within an element might exceed the dimensions of the box it's contained in. For instance, if the specified width and height properties aren't large enough to hold all the content.
The CSS overflow property comes in handy here, allowing you to specify how to handle situations where content overflows the boundaries of a block-level element.
This property can be assigned one of the following values: visible (default), hidden, scroll, and auto. CSS3 introduces the overflow-x and overflow-y properties for separate control over horizontal and vertical overflow.
div {
width: 250px;
height: 150px;
overflow: scroll;
}
Value |
Description |
|---|---|
visible |
This is the default value. Content isn't clipped, so it may extend beyond the element's box and overlap other content. |
hidden |
Content that exceeds the element's box is clipped, making the overflowed content invisible. |
scroll |
Similar to hidden, but it provides scrollbars to navigate through the overflowed content. |
auto |
Scrollbars are provided only when content overflows the element's box, allowing users to scroll to see the rest of the content. |