📏 CSS max-block-size — Complete Tutorial

🌐 What Is max-block-size?

The max-block-size property sets themaximum size of an element in the block direction. The block direction depends on the writing-mode:

  • ➡ Horizontal writing (English): block = height
  • ⬆ Vertical writing (Japanese/Chinese): block = width
>>“Use max-block-size to control how tall (or wide in vertical layouts) an element is allowed to grow — without breaking layout.”

Note

✔ Logical equivalent of max-height

✔ Writing-mode aware

✔ Essential for internationalized + responsive layouts

📦 Syntax

max-block-size syntax

max-block-size: <length> | <percentage> | none | max-content | min-content | fit-content();

📌 Understanding Logical Directions

Writing ModeBlock Directionmax-block-size Equals
horizontal-tbverticalmax-height
vertical-rlhorizontalmax-width

📌 1. Basic Example (Horizontal Writing)

Basic max-block-size

.box {
  max-block-size: 300px; /* same as max-height: 300px */
}

📌 2. Vertical Writing Mode Example

Vertical writing

.poem {
  writing-mode: vertical-rl;
  max-block-size: 300px; /* now acts like max-width */
}

The block axis rotates automatically in vertical writing modes.

📌 3. Using Percentages

Percentage limit

.panel {
  max-block-size: 60%;
}

Percentage is relative to the parent’s block-size (height in horizontal writing, width in vertical writing).

📌 4. Prevent Elements from Growing Too Tall

Restrict growth

.description {
  max-block-size: 200px;
  overflow: auto;
}

Useful for scrollable boxes that shouldn't exceed a certain height.

📌 5. Intrinsic Sizing Keywords

Intrinsic keywords

.item {
  max-block-size: max-content; /* grow as needed up to content max */
  max-block-size: min-content; /* rarely used; restricts tightly */
  max-block-size: fit-content(300px);
}

📌 6. Combine Min and Max Logical Sizes

Clamp block size

.box {
  min-block-size: 150px;
  max-block-size: 300px;
}

🧪 Real-World Use Cases

1️⃣ Scrollable Modal Content

Modal content

.modal-body {
  max-block-size: 50vh;
  overflow-y: auto;
}

Prevents the modal from overflowing the screen vertically.

2️⃣ Responsive Card Layout

Card example

.card {
  max-block-size: 250px;
  padding: 1rem;
}

3️⃣ Vertical Writing Support

Japanese layout

.japan-text {
  writing-mode: vertical-rl;
  max-block-size: 400px; /* acts like max-width */
}

4️⃣ Limit Chat Message Height

Chat message

.message {
  max-block-size: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

⚠️ Common Mistakes

  • ❌ Using max-height instead of max-block-size in RTL/vertical layouts
  • ❌ Forgetting block direction changes in vertical writing
  • ❌ Setting max-block-size on inline elements (must be block/inline-block/flex/grid item)
  • ❌ Forgetting to add overflow when the content exceeds max size

Note

Use logical sizes when building global-friendly components — they automatically adapt to writing direction.

🔥 Summary

The max-block-size property controls the maximum size along the block direction — acting like max-height in horizontal writing and max-width in vertical layouts. It's essential for responsive, restricted-size components like modals, cards, and text boxes.

>>“Logical sizing (like max-block-size) makes CSS smarter, scalable, and globally compatible.”

Learn more →MDN Docs 📘