CSS Overflow
Overflow
Sometimes, there may be a situation when the amount of content placed in an element is too longer to fit into an area. In such cases, the content of an element overflows, which may distrupt the display of the entire web page and make it unresponsive. The CSS overflow property defines whether to clip the content or to add the scrollbars when the content of an element is too longer to fit into the specified area. There are three types of overflow property available in CSS, which are given below-
All three overflow properties has one of the following values-
| Value | Description |
|---|---|
| visible | It is the default value for overflow, which specifies the overflow is not clipped and the content renders outside the elements box. |
| hidden | It specifies the overflow is clipped, and rest of the content of an element is invisible. |
| scroll | It specifies the overflow is clipped, and adds a scroll bar to see the rest of the content of an element. |
| auto | It is almost similar to scroll except the scrollbar, which will be shown only if the content of an element does overflow. |
| inherit | It inherits the overflow property value from its parent element. |
| initial | It sets the property value to its initial value (i.e. visible). |
div {
width: 300px;
height: 100px;
overflow: scroll;
}