CSS overflow-y property

Description

CSS overflow-y property represents overflow of content along vertical direction i.e. from top and bottom sides.

Syntax

overflow-y : visible | hidden | scroll | auto

Property values

visibleDefault

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

overflow-y: visible;

hidden

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

overflow-y: hidden;

scroll

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

overflow-y: scroll;

auto

It is same as 'scroll' but it provides vertical scrollbar only when the content overflows out of the box.

overflow-y: auto;

Applicable to

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

#CSS digger
Was this article helpful?

 
What happens when the content overflows out of the box?
×

Ctrl+D