TheoverflowCSSshorthand property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.

Try it

overflow: visible;

overflow: hidden;

overflow: clip;

overflow: scroll;

overflow: auto;

<section>  <p>    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's    Inn Hall. Implacable November weather. As much mud in the streets as if the    waters had but newly retired from the face of the earth.  </p></section>

#example-element {  width: 15em;  height: 9em;  border: medium dotted;  padding: 0.75em;  text-align: left;}

Constituent properties

This property is a shorthand for the following CSS properties:

• overflow-x
• overflow-y

Syntax

/* Keyword values */overflow: visible;overflow: hidden;overflow: clip;overflow: scroll;overflow: auto;overflow: hidden visible;/* Global values */overflow: inherit;overflow: initial;overflow: revert;overflow: revert-layer;overflow: unset;

Theoverflow property is specified as one or two<overflow> keyword values. If only one keyword is specified, bothoverflow-x andoverflow-y are set to the same value. If two keywords are specified, the first value applies tooverflow-x in the horizontal direction and the second one applies tooverflow-y in the vertical direction.

Values

visible

Overflow content is not clipped and may be visible outside the element's padding box. The element box is not ascroll container. This is the default value of theoverflow property.

hidden

Overflow content is clipped at the element's padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The contentcan be scrolled programmatically (for example, by linking to anchor text, by tabbing to a hidden yet focusable element, or by setting the value of thescrollLeft property or thescrollTo() method), in which case the element box is a scroll container.

clip

Overflow content is clipped at the element'soverflow clip edge that is defined using theoverflow-clip-margin property. As a result, content overflows the element's padding box by the<length> value ofoverflow-clip-margin or by0px if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No newformatting context is created. To establish a formatting context, useoverflow: clip along withdisplay: flow-root. The element box is not a scroll container.

scroll

Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars. User agents display scroll bars whether or not any content is overflowing, so in the horizontal and vertical directions if the value applies to both directions. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes. Printers may still print overflow content. The element box is a scroll container.

auto

Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars. Unlikescroll, user agents display scroll barsonly if the content is overflowing. If content fits inside the element's padding box, it looks the same as withvisible but still establishes a new formatting context. The element box is a scroll container.

Description

Overflow options include hiding overflow content, enabling scroll bars to view overflow content or displaying the content flowing out of an element box into the surrounding area, and combinations there of.

The following nuances should be kept in mind while using the various keywords foroverflow:

• Specifying a value other thanvisible (the default) orclip foroverflow creates a newblock formatting context. This is necessary for technical reasons; if a float intersects with a scrolling element, it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.
• For anoverflow setting to create the desired effect, the block-level element must have either a set height (height ormax-height) if the overflow is in the vertical direction, a set width (width ormax-width) if the overflow is in the horizontal direction, a set block-size ((block-size ormax-block-size) if the overflow is in the block direction, or a set inline-size ((inline-size ormax-inline-size) orwhite-space set tonowrap if the overflow is in the inline direction.
• Setting overflow tovisible in one direction (i.e.,overflow-x oroverflow-y) when it isn't set tovisible orclip in the other direction results in thevisible value behaving asauto.
• Setting overflow toclip in one direction when it isn't set tovisible orclip in the other direction results in theclip value behaving ashidden.
• The JavaScriptElement.scrollTop property may be used to scroll through content in a scroll container, except whenoverflow is set toclip.

Formal definition

Formal syntax

overflow =
<'overflow-block'>{1,2}

<overflow-block> =
visible|
hidden|
clip|
scroll|
auto

Accessibility

A scrolling content area is not keyboard-focusable, so it cannot be scrolled by a keyboard-only user. Firefox and Chrome 132 and later are exceptions; they make scroll containers focusable by default.

For other browsers, to enable keyboard-only users to scroll the container, you will need to assign atabindex to the container usingtabindex="0". Unfortunately, when a screen reader encounters this tab-stop, it may have no context about the container and could likely announce entire contents of the container. To mitigate this, give the container an appropriateWAI-ARIA role (role="region", for example) and an accessible name (viaaria-label oraria-labelledby).

Examples

Demonstrating results of various overflow keywords

HTML

<div>  <code>visible</code>  <p>    Maya Angelou: "I've learned that people will forget what you said, people    will forget what you did, but people will never forget how you made them    feel."  </p></div><div>  <code>hidden</code>  <p>    Maya Angelou: "I've learned that people will forget what you said, people    will forget what you did, but people will never forget how you made them    feel."  </p></div><div>  <code>clip</code>  <p>    Maya Angelou: "I've learned that people will forget what you said, people    will forget what you did, but people will never forget how you made them    feel."  </p></div><div>  <code>scroll</code>  <p>    Maya Angelou: "I've learned that people will forget what you said, people    will forget what you did, but people will never forget how you made them    feel."  </p></div><div>  <code>auto</code>  <p>    Maya Angelou: "I've learned that people will forget what you said, people    will forget what you did, but people will never forget how you made them    feel."  </p></div><div>  <code>overlay</code>  <p>    Maya Angelou: "I've learned that people will forget what you said, people    will forget what you did, but people will never forget how you made them    feel."  </p></div>

CSS

body {  display: flex;  flex-wrap: wrap;  justify-content: start;}div {  margin: 2em;  font-size: 1.2em;}p {  width: 5em;  height: 5em;  border: dotted;  margin-top: 0.5em;}div:nth-of-type(5),div:nth-of-type(6) {  margin-top: 200px;}

p.visible {  overflow: visible;}p.hidden {  overflow: hidden;}p.clip {  overflow: clip;  overflow-clip-margin: 1em;}p.scroll {  overflow: scroll;}p.auto {  overflow: auto;}p.overlay {  overflow: overlay;}

Result

Specifications

Browser compatibility

See also

• overflow-x,overflow-y
• overflow-block,overflow-clip-margin,overflow-inline
• clip,display,text-overflow,white-space
• SVGoverflow attribute
• CSS overflow module
• Keyboard-only scrolling areas on adrianroselli.com (2022)