Web/CSS/CSS Overflow

The CSS Overflow module contains the features of CSS relating to scrollable overflow handling in visual media. In CSS overflow happens when the content of a box extends past one or more of the box's edges.

Ink overflow and scrollable overflow

There are two types of overflow that you might encounter in CSS. The first is described as ink overflow. This is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc.

The overflow that we sometimes need to manage in CSS is described as scrollable overflow. This is the content appearing outside of the box for which scrolling mechanisms need to be provided. The overflow properties are how we can control what happens when content overflows a box.

Basic example

The following interactive example shows how changing the value of the overflow property, changes how the overflow of a fixed height box is dealt with.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Reference

CSS properties

• overflow
• overflow-block
• overflow-inline
• overflow-x
• overflow-y
• text-overflow
• block-overflow '
• line-clamp '
• max-lines '
• continue '

Non-standard properties

• -webkit-line-clamp '

Specifications

Specification	Status	Comment
CSS Overflow Module Level 3The definition of 'overflow' in that specification.	Working Draft	Changed syntax to allow one or two keywords instead of only one
CSS Level 2 (Revision 1)The definition of 'overflow' in that specification.	Recommendation	Initial definition.

See also

• Properties for controlling the look of scrollbars scrollbar-width and scrollbar-color
• How to Debug scrollable overflow.

CSS Overflow by Mozilla Contributors is licensed under CC-BY-SA 2.5.