CSS max-block-size Property

Description

The max-block-size CSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by the writing-mode property. In other words, it is the equivalent of either max-width or max-height, depending on the writing direction. The max-block-size property is useful for creating responsive designs that adapt to different screen sizes and orientations. For example, you can use it to ensure that an image never takes up more than half of the available space on the screen, regardless of whether the screen is in portrait or landscape mode.

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

<div class="standard-box">

  Call me Ishmael. Some years ago—never mind how long precisely—having little or

  no money in my purse, and nothing particular to interest me on shore, I

  thought I would sail about a little and see the watery part of the world. It

  is a way I have of driving off the spleen and regulating the circulation.

</div>

CSS

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

Result

Editor