CSS Overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
Overflow options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area.
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.
The JavaScript Element.scrollTop property may be used to scroll an HTML element even when overflow is set to hidden.
CSS Overflow Values
visible
Content is not clipped and may be rendered outside the padding box.
hidden
Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container.
clip
Like for hidden, the content is clipped to the element’s padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can use display: flow-root to do so.
scroll
Content is clipped if necessary to fit the padding box. Browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes. Printers may still print overflowing content.
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.
overlay
Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.
CSS Overflow Visible
By default, the overflow is visible, meaning that it is not clipped and it renders outside the element’s box:
div {
width: 300px;
height: 60px;
background-color: hotpink;
overflow: visible;
}
CSS Overflow Hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
div {
overflow: hidden;
}
CSS Overflow Scroll
Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.
div {
overflow: scroll;
}
CSS Overflow Auto
Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them. The scrollbars will only show up if there is content that actually breaks out of the element.
div {
overflow: auto;
}
CSS Constituent properties
This property is a shorthand for the following CSS properties:
Comments are closed.