CSS max-block-size Property

Description

The max-block-size property sets an upper limit on the size of a box in the block dimension — that is, along the axis that flows in the block direction for the element’s writing mode. Because it is a logical property, its effect follows the document’s writing-mode and direction: in horizontal-tb writing modes it behaves like the conventional vertical constraint on height, while in vertical writing modes it constrains the horizontal measurement that corresponds to the block axis. Conceptually it serves the same role on the logical block axis as max-height does on a physical vertical axis, but without assuming a particular physical orientation.

In layout calculations, max-block-size acts as a clamping constraint applied during the used-size resolution phase. When an element’s intrinsic size, specified size, or content-driven size would result in a block-axis extent larger than the value of this property, that extent is reduced to the maximum allowed value. It therefore interacts closely with other logical sizing properties such as min-block-size and block-size, and it participates in the same precedence rules: the final used size is determined by resolving specified values, intrinsic contributions, and then applying min/max clamps.

How that clamp affects rendering depends on the layout model in use. In flow layout the property limits the box’s extent and can cause overflow of its contents if they require more space; overflow handling is then governed by overflow. In flex and grid layouts, max-block-size can influence how flex items shrink or how grid tracks distribute space, because it constrains the size that an item or track may take along the block axis. For replaced elements and elements with intrinsic aspect ratios, the property participates in intrinsic sizing calculations and can be a decisive factor when resolving which dimension should be derived from the other.

Practically, max-block-size is useful for responsive and component-based design where you want elements to grow with their content up to a controlled limit, regardless of writing direction. It is also a tool to guard against runaway content growth (for example long lists or media) without having to use physical properties that break in different writing modes; its logical nature makes it a more robust way to express cross-writing-mode constraints, much like the complementary max-inline-size does for the inline axis.

Definition

Initial value: none
Applies to: same as width and height
Inherited: no
Computed value: same as max-width and max-height
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.maxBlockSize

Interactive Demo

max-block-size: 150px;
writing-mode: horizontal-tb;

max-block-size: 150px;
writing-mode: vertical-rl;

max-block-size: 20px;
writing-mode: horizontal-tb;

max-block-size: 75%;
writing-mode: vertical-lr;

This is a box where you can change the maximum block size.
This will limit the size in the block dimension, potentially causing an overflow.

Syntax

max-block-size: none | <max-width>

Values

noneNo limit on the size of the box.
<max-width>Defines the max-block-size as an value or percentage.

Example

HTML

<main class="container">

    <h1>max-block-size demo</h1>



    <p class="note">The first blue box requests a larger block-size but is constrained by max-block-size, so it becomes scrollable.</p>



    <section class="examples">

        <div class="box">

            <strong>Constrained box</strong>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

            </p>

        </div>



        <div class="box short">

            <strong>Not constrained</strong>

            <p>

                Short content that fits within the maximum block-size.

            </p>

        </div>

    </section>



    <section class="vertical">

        <h2>Vertical writing mode</h2>

        <div class="vbox">

            <p>

                これは縦書きの例です。長いテキストがブロック軸方向にあふれるとスクロールバーが表示されます。さらにテキストを追加して高さ（ブロック軸）を超えさせます。

            </p>

        </div>

    </section>

</main>

CSS

/* Container and basic typography */
.container {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    padding: 1.25rem;
    max-width: 64rem;
    margin: 0 auto;
    color: #0f172a;
}

h1 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
}

h2 {
    font-size: 1rem;
    margin: 0.75rem 0 0.5rem 0;
}

.note {
    margin: 0 0 1rem 0;
    color: #334155;
    font-size: 0.95rem;
}

.examples {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Example boxes demonstrating max-block-size */
.box {
    width: 28rem;                /* inline-size in horizontal writing modes */
    padding: 1rem;
    border: 2px solid #2563eb;
    background: #eef2ff;
    border-radius: 8px;
    box-sizing: border-box;

    /* The element requests a block-size of 10rem, but is constrained by max-block-size */
    block-size: 10rem;          /* desired block dimension */
    max-block-size: 6rem;       /* maximum allowed block dimension */
    overflow: auto;             /* allow scrolling when content exceeds the max-block-size */
}

.box.short {
    /* This box requests a smaller block-size and fits under the max */
    block-size: 4rem;
    max-block-size: 6rem;
}

.box strong {
    display: block;
    margin-bottom: 0.5rem;
}

/* Vertical writing mode example: block-axis runs differently, max-block-size still constrains that axis */
.vertical {
    margin-top: 1.25rem;
}

.vbox {
    writing-mode: vertical-rl;
    inline-size: 8rem;          /* width in vertical mode */
    block-size: 12rem;          /* requested block-size along the block axis */
    max-block-size: 8rem;       /* constraint on the block axis  -  will cause scrolling */
    padding: 0.5rem;
    border: 2px dashed #059669;
    background: #f0fdf4;
    overflow: auto;
    border-radius: 6px;
}

/* Small responsive tweak */
@media (max-width: 640px) {
    .examples {
        flex-direction: column;
    }

    .box {
        width: 100%;
    }
}

Result

Editor

Browser Support

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