overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`overflow`** CSS shorthand property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.

Try it
------

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `overflow-x`
* `overflow-y`
Syntax
------


```css
/\* 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;
```


The `overflow` property is specified as one or two `<overflow>` keyword values. If only one keyword is specified, both `overflow-x` and `overflow-y` are set to the same value. If two keywords are specified, the first value applies to `overflow-x` in the horizontal direction and the second one applies to `overflow-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 a scroll container. This is the default value of the `overflow` 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 content *can* be scrolled programmatically (for example, by setting the value of the `scrollLeft` property or the `scrollTo()` method), in which case the element box is a scroll container.

`clip`

Overflow content is clipped at the element's *overflow clip edge* that is defined using the `overflow-clip-margin` property. As a result, content overflows the element's padding box by the `<length>` value of `overflow-clip-margin` or by `0px` 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 new formatting context is created. To establish a formatting context, use `overflow: clip` along with `display: 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 in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes. Printers may still print overflowing 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. Unlike `scroll`, user agents display scroll bars *only if* the content is overflowing and hide scroll bars by default. If content fits inside the element's padding box, it looks the same as with `visible` but still establishes a new formatting context. The element box is a scroll container.


**Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space.

Description
-----------

Overflow options include hiding overflowing 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 for `overflow`:

* Specifying a value other than `visible` (the default) or `clip` for `overflow` creates a new block 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 an `overflow` setting to create the desired effect, the block-level element 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 through content in a scroll container, including when `overflow` is set to `hidden`.
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `visible` |
| Applies to | Block-containers, flex containers, and grid containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `overflow-x`: as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
* `overflow-y`: as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
 |
| Animation type | discrete |

Formal syntax
-------------
```

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

Examples
--------

### Demonstrating results of various overflow keywords

#### HTML


```html
<div>
  <code>visible</code>
  <p class="visible">
    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 class="hidden">
    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 class="clip">
    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 class="scroll">
    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 class="auto">
    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 class="overlay">
    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;
}
```



```css
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

Accessibility concerns
----------------------

A scrolling content area cannot be scrolled by a keyboard-only user, with the exception of users on Firefox (which makes the container keyboard focusable by default).

As a developer, to allow non-Firefox keyboard-only users to scroll the container, you will need to give it a `tabindex` using `tabindex="0"`. Unfortunately, when a screen reader encounters this tab-stop, they will have no context for what it is and their screen reader will likely announce the entirety of its contents. Giving it an appropriate WAI-ARIA role (`role="region"`, for example) and an accessible name (via `aria-label` or `aria-labelledby`) can mitigate this.

Specifications
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

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