CSS overflow
The CSS overflow module properties enable you to handle scrollable overflow in visual media.
Overflow happens when the content in an element box extends past one or more of the box's edges. Scrollable overflow is the content that appears outside the element box for which you might want to add a scrolling mechanism. CSS overflow properties enable you to control what happens when content overflows an element box.
Painting effects that overflow the content but do not participate in the CSS box model do not affect layout. This type of overflow is also known as ink overflow. Examples of ink overflows include box shadows, border images, text decoration, overhanging glyphs, and outlines. Ink overflows do not extend the scrollable overflow region.
Overflow in action
Use the following interactive example to see the effects of various overflow
property values on the content overflow and scrollbars in the adjacent fixed-size box.
The example also includes options to change the values for the overflow-clip-margin
and width
properties, as well as to programmatically scroll the content if the overflow property creates a scroll container. Select overflow: clip
and see the effect of different overflow-clip-margin
values. Select overflow: hidden
or overflow: scroll
to check out different ScrollLeft
and ScrollTop
slider settings.
A link is included in content box above to demonstrate the effects of keyboard focus on overflow and scroll behaviors. Try tabbing to the link or programmatically scrolling the content: the content will scroll only if the enumerated <overflow>
value created a scroll container.
Reference
CSS properties
overflow
shorthandoverflow-block
overflow-clip-margin
overflow-inline
overflow-x
overflow-y
scroll-behavior
scrollbar-gutter
text-overflow
block-ellipsis
continue
Experimentalline-clamp
Experimentalmax-lines
Experimental-webkit-line-clamp
Non-standard
Data types
<overflow>
enumerated values
Guides
- Overflowing content
-
CSS building block: learn what overflow is and how to manage it.
- Experimental Creating a named scroll timeline
-
The CSS scroll timeline
scroll-timeline-name
andscroll-timeline-axis
properties, along with thescroll-timeline
shorthand, create animations tied to the scroll offset of a scroll container.
Related concepts
scrollbar-width
CSS propertyscrollbar-color
CSS propertyscroll-behavior
CSS propertyscrollbar-gutter
CSS propertyscroll-margin
CSS shorthand propertyscroll-padding
CSS shorthand propertyscroll-snap-align
CSS propertyscroll-snap-stop
CSS propertyscroll-snap-type
CSS propertytext-overflow
CSS property::-webkit-scrollbar
pseudo-elementscrollbar
ARIA role- Element
scroll()
method - Element
scrollBy()
method - Element
scrollIntoView()
method - Element
scrollTo()
method - Element
scrollTop
property - Element
scrollLeft
property - Element
scrollWidth
property - Element
scrollHeight
property - Document
scroll
event - Scroll container glossary term
- Ink overflow glossary term
Specifications
Specification |
---|
CSS Overflow Module Level 3 # propdef-overflow |
See also
- CSS scrollbars styling module
- CSS scroll snap module
- CSSOM view module
- How to debug scrollable overflow