CSS overflow-x property

CSS overflow-x

CSS overflow-x can be used, when the content overflows along the x-axis (Left or Right) in the elements container.

Using this property we can add scroll bars or clip some of the contents.

CSS overflow-x property values are

  • visible
  • hidden
  • scroll
  • auto

visible value for css overflow-x property

It is the default. The overflowing content is not clipped, it is displayed outside the elements box.

Example

Try Yourself

hidden value for css overflow-x property

The overflowing content is clipped, only the remaining can be seen.

Example

Try Yourself

scroll value for css overflow property

The overflowing content is clipped, and scroll bar is added. So that the clipped content can be seen.

Example

Try Yourself

auto value for css overflow property

If the overflowing content is clipped, scroll bar is added.

Example

Try Yourself