Topics

CSS Overflow

The CSS overflow property defines the behavior that happens when an element's content overflows (or does not fit) the box of the element.

 

Handling Overflowing Content

At times the content of an element might be larger than the box dimensions. For example, the width and height properties given did not allow enough room to accommodate the element's content.

With a CSS overflow property, you can specify whether to clip content, render scroll bars, or display overflow content of a block-level element.

One of the following values can be taken by the CSS overflow property: visible (default), hidden, scroll, and auto. The overflow-x and overflow-y properties are also defined by CSS3. This property gives independent control of the vertical and horizontal clipping.

Example :

.content {
    width: 250px;
    height: 150px;
    overflow: scroll;
}

Try With Example

 

CSS Overflow Table

Value        
 		Description
visible 

It is the default value. Here the content is not clipped and is rendered outside the box of the element. As a result, 

it may overlap other content.

hidden Here, the content that overflows the box of the element is clipped, and the remaining content will be invisible.
scroll

Here, the overflowing content is clipped, similar to hidden, but you can access the

overflowing content through a scrolling mechanism.

auto 

When the content overflows the box of the element, it automatically provides the scrollbars 

for seeing the remaining content. Otherwise, the scrollbar will not appear.