overflow | Frontend Practical Guide

Browser support

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 shorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.