CSS Overflow - Ebhor.com

The web-page content often gets too much to fit in the area available. The element size can sometimes be not appropriate for the amount of content we want to fit in.

For such cases, CSS has the overflow property to handle the extra data. It specifies if the content needs to be clipped or we can add scrollbars.

The permissible values for the overflow property are:

visible
hidden
scroll
auto

visible

The visible value is used when you don’t want the content to be clipped. In such case, the extra content just renders outside the element’s box. This value is useful when you know for sure that the content rendered will definitely fit in the containing area.

hidden

This is the opposite of visible. When the overflow property is set to hidden, the extra content is simply clipped/hidden

scroll

Apart from some very specific cases, mere clipping of the content may not be desired. When given scroll value the overflow property not only clips the extra content but also adds scrollbar both horizontally and vertically so that you can see the extra content by scrolling.

Please note, that both horizontal and vertical bar will be added for the scroll value even if you don’t need one of them. In fact, if the content rendered is not overflowing, the scroll bars will still be there.

auto

The only difference between scroll and auto values is that auto adds the scrollbar only when it is necessary for the particular direction. Therefore, as long as the content is not overflowing in a direction (or both), the element will appear like in case of the visible value.

 .auto {
            background-color: cyan;
            width: 300px;
            height: 70px;
            overflow: auto;
        }

        .scroll {
            background-color: cyan;
            width: 300px;
            height: 70px;
            overflow: scroll;
        }

        .hidden {
            background-color: cyan;
            width: 300px;
            height: 70px;
            overflow: hidden;
        }

        .visible {
            background-color: cyan;
            width: 300px;
            height: 70px;
            overflow: visible;
        }

.auto {

background-color: cyan;

width: 300px;

height: 70px;

overflow: auto;

}

.scroll {

background-color: cyan;

width: 300px;

height: 70px;

overflow: scroll;

}

.hidden {

background-color: cyan;

width: 300px;

height: 70px;

overflow: hidden;

}

.visible {

background-color: cyan;

width: 300px;

height: 70px;

overflow: visible;

}

Run

overflow-x and overflow-y

The properties overflow-x and overflow-y control the horizontal and vertical overflow content respectively. You can use the above values to manipulate these properties.

  div {
            background-color: cyan;
            width: 300px;
            height: 200px;
            overflow-x: scroll;
            overflow-y: scroll;
        }

div {

background-color: cyan;

width: 300px;

height: 200px;

overflow-x: scroll;

overflow-y: scroll;

}

Run