overflow-block

Baseline 2025 *

Newly available

Since ⁨September 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Theoverflow-blockCSS 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:Theoverflow-block property maps tooverflow-y oroverflow-x depending on the writing mode of the document.

Syntax

css

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

Theoverflow-block property is specified as a single<overflow> keyword value:

Values

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.
clip: Overflow content is clipped at the element's overflow clip edge that is defined using theoverflow-clip-margin property.
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.
auto: Depends on the user agent. If content fits inside the padding box, it looks the same asvisible, but still establishes a new block-formatting context.

Formal definition

Initial value	`auto`
Applies to	Block-containers, flex containers, and grid containers
Inherited	no
Computed value	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-block =
visible|
hidden|
clip|
scroll|
auto

Examples

HTML

html

<ul>  <li>    <code>overflow-block: hidden</code> (hides the text outside the box)    <div>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate      velit esse cillum dolore eu fugiat nulla pariatur.    </div>  </li>  <li>    <code>overflow-block: scroll</code> (always adds a scrollbar)    <div>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate      velit esse cillum dolore eu fugiat nulla pariatur.    </div>  </li>  <li>    <code>overflow-block: clip</code> (hides the text outside the box beyond the    overflow clip edge)    <div>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate      velit esse cillum dolore eu fugiat nulla pariatur.    </div>  </li>  <li>    <code>overflow-block: visible</code> (displays the text outside the box if    needed)    <div>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate      velit esse cillum dolore eu fugiat nulla pariatur.    </div>  </li>  <li>    <code>overflow-block: auto</code> (on most browsers, equivalent to    <code>scroll</code>)    <div>      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate      velit esse cillum dolore eu fugiat nulla pariatur.    </div>  </li></ul>

CSS

css

div {  border: 1px solid black;  width: 250px;  height: 100px;  margin-bottom: 120px;}#hidden {  overflow-block: hidden;}#scroll {  overflow-block: scroll;}#clip {  overflow-block: clip;}#visible {  overflow-block: visible;}#auto {  overflow-block: auto;}