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.
From web4college, the free CSS digger
#CSS digger
Was this article helpful?