max-block-size
==============

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 `writing-mode`. That is, if the writing direction is horizontal, then `max-block-size` is equivalent to `max-height`; if the writing direction is vertical, `max-block-size` is the same as `max-width`.

The other dimension's maximum length is specified using the `max-inline-size` property.

This is useful because the `max-width` is always used for horizontal sizes and `max-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 use `max-height` or `max-width`, you should instead use `max-block-size` to set the maximum "height" of the content (even though this may not be a vertical value) and `max-inline-size` to set the maximum "width" of the content (although this may instead be vertical rather than horizontal). See `writing-mode` examples, which show the different writing modes in action.

Try it
------

Syntax
------


```css
/\* <length> values \*/
max-block-size: 300px;
max-block-size: 25em;

/\* <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

The `max-block-size` property's value can be any value that's legal for the `max-width` and `max-height` properties:

`<length>`

Defines the `max-block-size` as an absolute value.

`<percentage>`

Defines the `max-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 preferred `max-block-size`.

`min-content`

The intrinsic minimum `max-block-size`.

`fit-content`

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

`fit-content(`<length-percentage>`)` 
Experimental

Uses the `fit-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 of `writing-mode` affect the mapping of `max-block-size` to `max-width` or `max-height` as follows:

| Values of `writing-mode` | `max-block-size` is equivalent to |
| --- | --- |
| `horizontal-tb`, `lr` 
Deprecated
, `lr-tb` 
Deprecated
, `rl` 
Deprecated
, `rb` 
Deprecated
, `rb-rl` 
Deprecated
 | `max-height` |
| `vertical-rl`, `vertical-lr`, `sideways-rl` 
Experimental
, `sideways-lr` 
Experimental
, `tb` 
Deprecated
, `tb-rl` 
Deprecated
 | `max-width` |

**Note:** The `writing-mode` values `sideways-lr` and `sideways-rl` were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.

**Note:** The writing modes `lr`, `lr-tb`, `rl`, `rb`, and `rb-tl` are no longer allowed in HTML contexts; they may only be used in SVG 1.x contexts.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | same as `width` and `height` |
| Inherited | no |
| Percentages | block-size of containing block |
| Computed value | same as `max-width` and `max-height` |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

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

Examples
--------

### Setting max-block-size with horizontal and vertical text

In this example, the same text (the opening sentences from Herman Melville's novel *Moby-Dick*) is presented in both the `horizontal-tb` and `vertical-rl` writing modes.

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

#### HTML

The HTML establishes the two `<div>` blocks that will be presented with their `writing-mode` set using the classes `horizontal` or `vertical`. Both boxes share the `standard-box` class, which establishes coloring, padding, and their respective values of `max-block-size`.


```html
<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  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 class="standard-box vertical">
  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 classes `horizontal` and `vertical`, which add the `writing-mode` property to the box, with the value set to `horizontal-tb` or `vertical-rl` depending on which class is used.


```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;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

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