CSS max-block-size Property

Definition and Usage

The max-block-size property sets the maximum size on the block axis. With the default writing-mode: horizontal-tb, that is the same job as max-height. In a vertical writing mode, it maps to max-width instead.

The box can stay smaller than the limit. It cannot grow past the ceiling on that axis. Cap the other axis with max-inline-size. Pair a tight cap with overflow when content may exceed it.

CSS Syntax

Start with none, lengths, and percentages. Intrinsic keywords are optional extras.

Property Values

How to Use max-block-size

Choose a ceiling on the block axis, then decide what happens when content is larger than that ceiling.

1. Leave max-block-size: none when the box should grow freely on the block axis.
2. Set a length or percentage to cap growth. In horizontal writing this feels like max-height.
3. For percentages, give the containing block an explicit size on the block axis first.
4. Add overflow: auto so extra content scrolls instead of spilling.

Live Preview

Same long text, different max-block-size values in horizontal writing. Watch the box stop growing and scroll when capped.

CSS Examples

Each snippet focuses on max-block-size. Use Try It Yourself for a live editor.

<style>
  div {
    max-block-size: 120px;
    overflow: auto;
  }
</style>

<div>
  Line one.<br>
  Line two.<br>
  Line three.<br>
  Line four.<br>
  Line five.<br>
  Line six.
</div>

<style>
  div {
    writing-mode: vertical-rl;
    max-block-size: 120px;
    overflow: auto;
  }
</style>

<div>
  Line one.<br>
  Line two.<br>
  Line three.<br>
  Line four.<br>
  Line five.<br>
  Line six.
</div>

<style>
  .parent {
    block-size: 200px;
  }

  .child {
    max-block-size: 50%;
    overflow: auto;
  }
</style>

<div class="parent">
  <div class="child">
    Line one.<br>
    Line two.<br>
    Line three.<br>
    Line four.<br>
    Line five.<br>
    Line six.
  </div>
</div>

Key Takeaways