overflow | Frontend Practical Guide

Overview

The overflow CSS property sets the behavior for when content doesn't fit in an element.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`overflow`	1	12	1	1	18	1
Other
`css.properties.overflow-x` The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property.	1	12	3.5	3	18	1
CSS property
`auto`	1	12	3.5	3	18	2
`hidden`	1	12	3.5	3	18	2
`scroll`	1	12	3.5	3	18	2
`visible`	1	12	3.5	3	18	2
Other
`css.properties.overflow-y` The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property.	1	12	3.5	3	18	1
CSS property
`auto`	1	12	3.5	3	18	2
`hidden`	1	12	3.5	3	18	2
`scroll`	1	12	3.5	3	18	2
`visible`	1	12	3.5	3	18	2
`auto`	1	12	1	3	18	2
`hidden`	1	12	1	3	18	2
`multiple keywords` Multiple keyword syntax for `overflow-x` and `overflow-y`	68	79	61	13.1	68	13.4
`scroll`	1	12	1	3	18	2
`visible`	1	12	1	3	18	2
Other
`css.types.overflow` The enumerated value type represents the keyword values for the overflow-block, overflow-inline, overflow-x, and overflow-y longhand properties and the overflow shorthand property. These properties apply to block containers, flex containers, and grid containers.	1	12	1	1	18	1

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

.scroll-box {
  overflow: auto;
}
.hidden-box {
  overflow: hidden;
}

CSS Overflow: auto demo.

CSS Overflow: hidden demo.

CSS Overflow: scroll demo.

Using overflow
The overflow CSS property sets the behavior for when content doesn't fit in an element.