Overflow in CSS

#css #webdev #beginners #productivity

Overflow Property:

Overflow in CSS is used to control what happens when the content inside an element is larger than the element's specified width or height.

Syntax:

selector {
    overflow: value;
}

Why do we use overflow?

Suppose a <div> has a fixed height, but the content inside it is too large. The content may go outside the boundaries of the element.

The overflow property controls whether that extra content should be:

overflow: visible

This is the default value.

The content that exceeds the element's boundary will still be visible.

.box {
    width: 200px;
    height: 100px;
    overflow: visible;
}

overflow: hidden

The content that exceeds the element's boundary will be hidden.

.box {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

overflow: scroll

This always displays scrollbars, even when the content does not necessarily need scrolling.

.box {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

overflow: auto

The browser automatically decides whether scrollbars are required.

.box {
    width: 200px;
    height: 100px;
    overflow: auto;
}

This is commonly preferred when you don't want unnecessary scrollbars.

correct