CSS max-block-size Property

What You’ll Learn

The max-block-size property caps how large an element can grow along the block axis. In everyday horizontal layouts, that usually means limiting height while still letting shorter content stay compact.

Introduction

The max-block-size property in CSS defines the maximum size of a block-level element along the block axis. This property is useful for controlling the maximum height or width of an element in a block formatting context, depending on the writing mode of the document.

By specifying a maximum size, you can prevent elements from growing beyond a certain point, which helps maintain layout and design consistency across different devices and screen sizes.

Definition and Usage

In horizontal writing modes such as English, the block axis runs top to bottom, so max-block-size: 400px; usually caps height. In vertical writing modes, the same property caps width instead.

Pair max-block-size with overflow: auto when content might exceed the limit, and use it alongside block-size and min-block-size for full logical sizing control.

📝 Syntax

Write max-block-size with a length, percentage, sizing keyword, or none:

element {
  max-block-size: length | max-content | min-content | fit-content | none | initial | inherit;
}

Basic Example

.box {
  max-block-size: 400px;
  overflow: auto;
  background-color: #e2e8f0;
}

Syntax Rules

• The initial value is none, meaning no maximum block-size constraint.
• Length values such as px, rem, and vh set a fixed upper limit.
• Percentages are relative to the containing block’s block size.
• Keywords like min-content, max-content, and fit-content cap size based on content.
• Use with overflow when content may exceed the maximum and should scroll.

🎯 Default Value

The default value of max-block-size is none. Without explicit styling, the element has no maximum size constraint along the block axis and can grow as needed based on its content and other sizing properties.

💎 Property Values

These are the most common values you will use with max-block-size.

Max Block Size and Writing Modes

max-block-size follows the writing mode instead of always mapping to vertical max-height. That is the main reason to choose it over physical properties like max-height.

• block-size sets the preferred block dimension; max-block-size sets the upper limit.
• min-block-size sets the lower limit on the same axis.
• Logical properties help components stay correct when text direction or writing mode changes.

max-block-size vs max-height

Examples Gallery

Try max-block-size with fixed caps, scrollable panels, viewport-relative limits, and side-by-side comparisons.

<style>
  .box {
    max-block-size: 400px;
    overflow: auto;
    background-color: lightgray;
  }
</style>

<div class="box">
  Long paragraph content goes here…
</div>

<style>
  .panel {
    max-block-size: 150px;
    overflow-y: auto;
    padding: 1rem;
    background: #dbeafe;
  }
</style>

<div class="panel">
  Scrollable panel content…
</div>

.hero-card {
  max-block-size: 50vh;
  overflow: auto;
  padding: 1.5rem;
}

.none { max-block-size: none; }
.sm { max-block-size: 120px; overflow: auto; }
.md { max-block-size: 240px; overflow: auto; }

💡 Best Practices