CSS overflow-block Property
Example
div {
overflow-block: hidden;
margin-bottom: 150px;
}Meaning:
The overflow-block CSS property sets what shows when content overflows the block start and block end edges of a box. This may be nothing, a scroll bar, or the overflow content.
Note: The overflow-block property maps to overflow-x or overflow-y depending on the writing mode of the document.
| Default value: | auto |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
overflow-block: auto|visible|hidden|scroll|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| auto | Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows. |
| visible | Content is not clipped and may be rendered outside the padding box's block start and block end edges. |
| hidden | Content is clipped if necessary to fit the block dimension in the padding box. No scrollbars are provided. |
| scroll | Content is clipped if necessary to fit in the block dimension in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
overflow-block: auto;
}