CSS overflow-block Property

Description

The overflow-block property controls how content that extends beyond an element’s box is handled along the block axis — that is, the axis determined by the document’s flow direction rather than a fixed vertical/horizontal orientation. In practice this means it decides whether overflowing content on the block-start/block-end side is clipped, allowed to render outside the box, or made available through scrolling; when scrolling is involved the element becomes a scroll container in that axis and its overflowed descendants are contained by its scrolling and clipping region.

Because it targets the logical block axis, the effect of overflow-block follows changes in writing direction and layout orientation: the same declaration can govern vertical overflow in a typical top-to-bottom page or horizontal overflow in a vertical-rl writing mode. This makes it particularly useful for internationalized layouts and adaptive components where you want overflow behavior tied to the document flow rather than a fixed dimension. Where broader control is needed, authors commonly pair it with the shorthand overflow or with the complementary inline-axis property overflow-inline to handle the other axis.

Beyond clipping and scrollability, altering block-axis overflow affects painting, hit-testing and the way content participates in layout. For example, establishing a non-visible overflow in the block axis can create a containment context for descendant content, preventing floats or child boxes from escaping and changing how background painting and stacking are applied. Because the block axis is governed by writing mode, you’ll want to consider the element’s writing-mode when reasoning about visual results and interaction—especially for components that must behave consistently across different language directions or rotated layouts.

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
Animatable: yes
JavaScript syntax: object.style.overflowBlock

Syntax

overflow-block: visible | hidden | clip | scroll | auto

Values

visibleContent is not clipped and may be rendered outside the padding box's block start and block end edges.
hiddenContent is clipped if necessary to fit the block dimension in the padding box. No scrollbars are provided.
clipOverflow content is clipped at the element's overflow clip edge that is defined using the overflow-clip-margin property.
scrollContent 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.
autoDepends 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.

Example

HTML

<div class="demo">

    <h2>overflow-block examples</h2>

    <div class="examples">

        <div class="box auto">

            <div class="label">overflow-block: auto</div>

            <div class="content">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

            </div>

        </div>



        <div class="box hidden">

            <div class="label">overflow-block: hidden</div>

            <div class="content">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            </div>

        </div>



        <div class="box scroll vertical">

            <div class="label">writing-mode: vertical-rl; overflow-block: scroll</div>

            <div class="content">

                This content is long to force overflow along the block axis in vertical writing mode. Extra text to cause overflow. More text to ensure scrolling appears on the block axis.

            </div>

        </div>

    </div>

</div>

CSS

/* Basic page styles */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 20px;
    background: #f7f8fa;
    color: #111;
}

.demo h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
}

.examples {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Box common styles */
.box {
    width: 260px;
    height: 120px;
    padding: 10px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    overflow-inline: auto; /* keep inline-axis behavior default */
}

.box .label {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 13px;
}

.box .content {
    font-size: 13px;
    line-height: 1.3;
}

/* Demonstrate different overflow-block values (controls the block axis overflow) */
.box.auto {
    overflow-block: auto; /* shows scrollbars if content exceeds the block axis */
}

.box.hidden {
    overflow-block: hidden; /* hides overflow on the block axis */
}

.box.scroll {
    overflow-block: scroll; /* always show a scrollbar on the block axis */
}

/* Make the third example use vertical writing mode so the block axis runs horizontally */
.box.vertical {
    width: 120px;
    height: 160px;
    writing-mode: vertical-rl; /* block axis becomes horizontal here */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS overflow-block property. Hover over a browser icon to see the version that first introduced support for this CSS property.