CSS overflow-x property

Description

CSS overflow-x property represents overflow of content along horizontal direction i.e. from left and right sides.

Syntax

overflow-x : visible | hidden | scroll | auto

Property values

visibleDefault

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

overflow-x: visible;

hidden

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

overflow-x: hidden;

scroll

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

overflow-x: scroll;

auto

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

overflow-x: 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?

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

Ctrl+D