CSS min-block-size Property

Definition and Usage

The min-block-size property sets the minimum size of an element along the block axis. In a horizontal writing mode it behaves like min-height. In a vertical writing mode it behaves like min-width.

It is not inherited. The initial value is 0. Pair it with max-block-size for a cap, and with min-inline-size for the other axis. Content can still make the box grow past the minimum.

CSS Syntax

Values match min-width / min-height. Newer keywords like stretch have limited support.

Property Values

How to Use min-block-size

Think in writing-mode terms: set a floor on the block axis, not “always top–bottom.”

1. Use min-block-size where you would reach for min-height in a horizontal layout.
2. Pick 0, a length, or a percentage of the containing block.
3. Add block-size / max-block-size when you also need a preferred size or a cap.
4. Test with writing-mode if the page may switch to vertical text.

Live Preview

Change min-block-size on a short box. In the default horizontal mode, this acts like min-height. Longer content can still grow past the floor.

CSS Examples

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

<style>
  div {
    min-block-size: 150px;
  }
</style>

<div>Short text</div>

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

  .child {
    min-block-size: 50%;
  }
</style>

<div class="parent">
  <div class="child">At least half</div>
</div>

<style>
  div {
    writing-mode: vertical-rl;
    min-block-size: 150px;
  }
</style>

<div>Hi</div>

Key Takeaways