CSS overflow
The CSS overflow property allows you to determine what to when a box is too small for its contents. You can create scroll bars, hide the contents, or automatically expand the box.
As of CSS3, the overflow property is a shorthand property for the overflow-x and overflow-y properties (those properties were only introduced in CSS3). The overflow property allows you to set both of those properties at once.
Syntax
Possible Values
The overflow property is shorthand, and accepts one or two keywords (below). If it has one keyword, that keyword sets both overflow-x and overflow-y; if it has two keywords, it sets overflow-x to the first and overflow-y to the second.
visible- Specifies that the content should not be clipped. In other words, it should be displayed outside the content box.
hidden- Specifies that the content is clipped (i.e. the parts that extend beyond the content box are hidden), and no scroll bars (or other scrolling mechanism) are supplied. However, the content can still be scrolled programmatically (e.g., using JavaScript).
clip- Like
hidden, this value indicates that the box's content is clipped to its padding box and that no scrolling user interface should be provided. However, unlikehidden,clipforbids scrolling entirely, through any mechanism (including programmatic scrolling), and therefore the box is not a scroll container. scroll- Specifies that the content box should provide scroll bars (or other scrolling mechanism) regardless of whether the content is clipped or not.
auto- Specifies that the content box should provide scroll bars (or other scrolling mechanism) only when the content overflows (i.e. is too big to fit within the content box).
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
initial- Represents the value specified as the property's initial value.
inherit- Represents the computed value of the property on the element's parent.
unset- This value acts as either
inheritorinitial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
General Information
- Initial Value
- See individual properties
- Applies To
-
The exact wording depends on the spec:
- CSS2: Block containers.
- CSS basic box model: Non-replaced block-level elements and non-replaced 'inline-block' elements.
- CSS Overflow Module Level 3: Block containers, flex containers, and grid containers.
- Inherited?
- No
- Media
- Visual
Example Code
Official Specifications
- CSS Overflow Module Level 3 (Editor's Draft)
- CSS Overflow Module Level 3 (W3C Working Draft)
- CSS Level 2.1 (W3C Recommendation 07 June 2011)
Browser Support
Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.
Initial Value
CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.
Inheritance
Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.
Vendor Prefixes
Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.