Themax-block-sizeCSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified bywriting-mode. That is, if the writing direction is horizontal, thenmax-block-size is equivalent tomax-height; if the writing direction is vertical,max-block-size is the same asmax-width.

The other dimension's maximum length is specified using themax-inline-size property.

This is useful because themax-width is always used for horizontal sizes andmax-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.

Any time you would normally usemax-height ormax-width, you should instead usemax-block-size to set the maximum "height" of the content (even though this may not be a vertical value) andmax-inline-size to set the maximum "width" of the content (although this may instead be vertical rather than horizontal). Seewriting-mode examples, which show the different writing modes in action.

Try it

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;

<section>  <div>    This is a box where you can change the maximum block size. <br />This will    limit the size in the block dimension, potentially causing an overflow.  </div></section>

#example-element {  display: flex;  flex-direction: column;  background-color: #5b6dcd;  justify-content: center;  color: white;}

Syntax

/* <length> values */max-block-size: 300px;max-block-size: 25em;max-block-size: anchor-size(--my-anchor self-inline, 250px);max-block-size: calc(anchor-size(width) / 2);/* <percentage> values */max-block-size: 75%;/* Keyword values */max-block-size: none;max-block-size: max-content;max-block-size: min-content;max-block-size: fit-content;max-block-size: fit-content(20em);/* Global values */max-block-size: inherit;max-block-size: initial;max-block-size: revert;max-block-size: revert-layer;max-block-size: unset;

Values

Themax-block-size property's value can be any value that's legal for themax-width andmax-height properties:

<length>

Defines themax-block-size as an absolute value.

<percentage>

Defines themax-block-size as a percentage of the containing block's size in block axis.

none

No limit on the size of the box.

max-content

The intrinsic preferredmax-block-size.

min-content

The intrinsic minimummax-block-size.

fit-content

Use the available space, but not more thanmax-content, i.e.,min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Uses thefit-content formula with the available space replaced by the specified argument, i.e.,min(max-content, max(min-content, argument)).

How writing-mode affects directionality

The values ofwriting-mode affect the mapping ofmax-block-size tomax-width ormax-height as follows:

Formal definition

Formal syntax

max-block-size =
<'max-width'>

<max-width> =
none|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Examples

Setting max-block-size with horizontal and vertical text

In this example, the same text (the opening sentences fromHerman Melville's novelMoby-Dick) is presented in both thehorizontal-tb andvertical-rl writing modes.

Everything else about the two boxes is identical, including the values used formax-block-size.

HTML

The HTML establishes the two<div> blocks that will be presented with theirwriting-mode set using the classeshorizontal orvertical. Both boxes share thestandard-box class, which establishes coloring, padding, and their respective values ofmax-block-size.

<p>Writing mode <code>horizontal-tb</code> (the default):</p><div>  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><p>Writing mode <code>vertical-rl</code>:</p><div>  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

The CSS defines three classes. The first,standard-box, is applied to both boxes, as seen above. It provides standard styling including the minimum and maximum block sizes, font size, and so forth.

After that come the classeshorizontal andvertical, which add thewriting-mode property to the box, with the value set tohorizontal-tb orvertical-rl depending on which class is used.

.standard-box {  padding: 4px;  background-color: #abcdef;  color: black;  font:    16px "Open Sans",    "Helvetica",    "Arial",    sans-serif;  max-block-size: 160px;  min-block-size: 100px;}.horizontal {  writing-mode: horizontal-tb;}.vertical {  writing-mode: vertical-rl;}

Result

Specifications

Browser compatibility

See also

• The mapped physical properties:max-width andmax-height
• Setting the other direction's maximum size:max-inline-size
• writing-mode