CSS overflow Property
The overflow property sets the desired behavior for content overflow of a block container element.
Description & Usage
The overflow property specifies how a container element handles content that exceeds its width or height dimensions.
Common values like hidden clip overflowing content, while auto dynamically adds scrollbars when content exceeds bounds.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Layout |
| Initial Value | visible |
| Inherited | No (not inherited) |
| Applies To | Block containers, flex containers, grid containers |
Syntax
overflow: visible | hidden | clip | scroll | auto;Property Values
| Value | Description |
|---|---|
| visible | Content is not clipped and renders outside container box. |
| hidden | Content is clipped and no scrollbars are provided. |
| auto | Scrollbars are added automatically if content overflows. |
| scroll | Scrollbars are always visible regardless of overflow. |
Code Examples
Scrollable Card Body
.modal-body {
max-height: 400px;
overflow-y: auto;
}
Adds vertical scrollbar if content exceeds 400px height.