CSS overflow property

Description

CSS overflow property represents the behavior of content when it overflows out of the box along both horizontal and vertical directions.

It is a shorthand property of overflow-x and overflow-y.

If only one value is specified, the other one is copied from the first one.

Syntax

overflow : overflow-x   overflow-y

Property values

visibleDefault

The content overflows out of the boundaries of the box and is also visibile.

It is the same as overflow: visibile visibile;

overflow: visible;

hidden

In this case, the content that overflows out of the box becomes invisible.

It is the same as overflow: hidden hidden;.

overflow: hidden;

scroll

It provides scrollbar no matter whether the content overflows or not.

It is the same as overflow: scroll scroll;.

overflow: scroll;

auto

It is same as 'scroll' but its scrollbar is visibile only when the content overflows out of the box.

Both values are 'auto' i.e. overflow: auto auto;

overflow: auto;

Applicable to

It applies to block containers, grid containers, and flex containers.

#CSS digger
Was this article helpful?

 
We are observing the effect of overflow property for different values.
×

Ctrl+D