CSS overflow
TheCSS 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 let you control what happens when content overflows an element box, including creating carousels without JavaScript.
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 asink 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
Try the following example to see the effects of variousoverflow property values on the content overflow and scrollbars in the adjacent fixed-size box.
The example includes options to change the values for theoverflow-clip-margin andwidth properties, as well as to programmatically scroll the content if the overflow property creates ascroll container. Selectoverflow: clip and see the effect of differentoverflow-clip-margin values. Selectoverflow: hidden oroverflow: scroll to check out the variousScrollLeft andScrollTop slider settings.
<article> <fieldset> <legend>Select options:</legend> <label ><code>overflow</code>: <select> <option>hidden</option> <option>clip</option> <option>scroll</option> <option>auto</option> <option selected>visible</option> <option>overlay</option> </select> </label> <label> <code>overflow-clip-margin</code>: <input type="number" value="1" min="0" max="10" /> <code>em</code> </label> <label ><input type="checkbox" /> <code>width</code>: <code>20em</code> or <code>40em</code></label > <fieldset> <legend>Scroll programmatically:</legend> <label >ScrollLeft: <input type="range" min="0" max="100" value="0" /></label> <label >ScrollTop: <input type="range" min="0" max="100" value="0" /></label> </fieldset> </fieldset> <pre> Oh, Rubber Duckie, you're the one You make bath time lots of fun Rubber Duckie, I'm awfully fond of you Rubber Duckie, joy of joys When I squeeze you, you make noise Rubber Duckie, you're my very best friend, it's true Oh, every day when I make my way to the tubby I find a little fella who's cute and yellow and chubby Rub-a-dub-dubby <a href="#">Rubber Duckie</a>, you're so fine And I'm lucky that you're mine Rubber Duckie, I'm awfully fond of you </pre></article>article { display: flex; gap: 1em;}label { display: block; white-space: nowrap;}pre { border: 2px dashed crimson; height: 150px; width: 20em; margin-bottom: 3em; overflow-clip-margin: 1em; text-align: center;}.wide { width: 40em;}::before { font-weight: bold; color: white; background: crimson; display: inline-block; min-width: 50%; padding: 3px 5px; box-sizing: border-box;}.hidden { overflow: hidden;}.hidden::before { content: "hidden: ";}.clip { overflow: clip;}.clip::before { content: "clip: ";}.scroll { overflow: scroll;}.scroll::before { content: "scroll: ";}.auto { overflow: auto;}.auto::before { content: "auto: ";}.overlay { overflow: clip; overflow: overlay;}.overlay::before { content: "overlay (or clip if not supported): ";}.visible { overflow: visible;}.visible::before { content: "visible: ";}article:not(:has(pre.clip)) > fieldset > label:nth-of-type(2),article:not(:has(pre.hidden, pre.scroll, pre.auto, pre.overlay)) fieldset fieldset { opacity: 20%; pointer-events: none;}const pre = document.querySelector("pre");const val = document.getElementById("overflowValue");const check = document.getElementById("wide");const ocm = document.getElementById("ocm");const scrollL = document.getElementById("scrollL");const scrollT = document.getElementById("scrollT");val.addEventListener("change", () => { if (pre.classList.contains("wide")) { pre.className = `wide ${val.value}`; } else { pre.className = `${val.value}`; } scrollExample(); clipMargin();});wide.addEventListener("change", () => { pre.classList.toggle("wide"); scrollExample();});ocm.addEventListener("change", () => { clipMargin();});scrollL.addEventListener("change", () => { scrollExample();});scrollT.addEventListener("change", () => { scrollExample();});function scrollExample() { pre.scrollTo({ top: scrollT.value, left: scrollL.value * 2, behavior: "smooth", });}function clipMargin() { pre.style.overflowClipMargin = `${ocm.value}em`;}A link is included in the 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 creates a scroll container.
Reference
Properties
line-clampoverflowshorthandoverflow-blockoverflow-clip-marginoverflow-inlineoverflow-xoverflow-yscroll-behaviorscroll-marker-groupscroll-target-groupscrollbar-guttertext-overflow
The CSS overflow level 4 module also introduces theblock-ellipsis,continue,max-lines,overflow-clip-margin-block,overflow-clip-margin-block-end,overflow-clip-margin-block-start,overflow-clip-margin-bottom,overflow-clip-margin-inline,overflow-clip-margin-inline-end,overflow-clip-margin-inline-start,overflow-clip-margin-left,overflow-clip-margin-right, andoverflow-clip-margin-top properties. Currently, no browsers support these features.
Selectors and pseudo-elements
Data types
<overflow>enumerated values
Glossary terms and definitions
Guides
- Learn: Overflowing content
Learn what overflow is and how to manage it.
- Creating CSS carousels
Create pure-CSS carousel UI features using scroll buttons, scroll markers, and generated columns.
- Creating a named scroll progress timeline animation
The CSS scroll timeline
scroll-timeline-nameandscroll-timeline-axisproperties, along with thescroll-timelineshorthand, create animations tied to the scroll offset of a scroll container.
Related concepts
::columnscrollbar-widthCSS propertyscrollbar-colorCSS propertyscrollbar-gutterCSS propertyscroll-behaviorCSS propertyscroll-marginCSS shorthand propertyscroll-paddingCSS shorthand propertyscroll-snap-alignCSS propertyscroll-snap-stopCSS propertyscroll-snap-typeCSS propertytext-overflowCSS property::-webkit-scrollbarpseudo-elementscrollbarARIA role- Element
scroll()method - Element
scrollBy()method - Element
scrollIntoView()method - Element
scrollTo()method - Element
scrollTopproperty - Element
scrollLeftproperty - Element
scrollWidthproperty - Element
scrollHeightproperty - Document
scrollevent - Scroll container glossary term
- Ink overflow glossary term
Specifications
| Specification |
|---|
| CSS Overflow Module Level 3 |
| CSS Overflow Module Level 4 |
| CSS Overflow Module Level 5 |
See also
- CSS scrollbars styling module
- CSS scroll snap module
- CSSOM view module
- How todebug scrollable overflow