CSS overflow

Defines how a block-level element should handle content that goes beyond its boundaries. This is shorthand for overflow-x and overflow-y.

Syntax

overflow: <value>;

Copy to clipboard
Copy to clipboard

where <value> can be one of the following:

• visible: the default value. No content will be clipped and a scrollbar will not appear.
• hidden: content will be clipped and no scrollbar will appear.
• scroll: content will be clipped and a scrollbar will appear.
• auto: content will be clipped if it does not fit in the containing block, and a scrollbar will appear if it does.
• Keyword values: initial, inherit, revert, unset.

Example 1

Any content that overflows will be visible outside of its containing element.

.view-box {
  overflow: visible;
}

Copy to clipboard
Copy to clipboard

Example 2

Provide a scrollbar and clip any content that overflows.

.view-box {
  overflow: scroll;
}

Copy to clipboard
Copy to clipboard

Example 3

Any Content that overflows will not be visible and no scrollbar will appear.

.view-box {
  overflow: hidden;
}

Copy to clipboard
Copy to clipboard

The following image demonstrates the three overflow properties described above: