CSS Overflow
CSS overflow property defines what to do if the content is too large to fit in the container box.
For example a div, which is set to be 200px width but contains an image of 250px width. In this case the will stick out of the div and it is visible by default. There are some other values of overflow properties:
- visible - It is the default value. The content will stick out of the container box.
- hidden - The overflowing contents will be hidden.
- scroll - A scrollbar will be added for the overflowing content. User can see the overflowing content by scrolling.
- auto - It is same to the scroll but the scrollbars will be added only when it is necessary.
overflow Property Example
visible is the default value of overflow property.
Here is an example of static value:
Example:
div.scroll
{
width: 500px;
height: 100px;
background-color: lightblue;
overflow: visible;
}
div.hidden {
width: 500px;
height: 100px;
background-color: green;
overflow: hidden;
}
width: 500px;
height: 100px;
background-color: lightblue;
overflow: visible;
}
div.hidden {
width: 500px;
height: 100px;
background-color: green;
overflow: hidden;
}
Run Example