We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 the Example in writing-mode, which shows the different writing modes in action.

/* <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: fill-available;

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;

Initial value0
Applies tosame as width and height
Inheritedno
Percentagesblock-size of containing block
Mediavisual
Computed valuesame as max-width and max-height
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

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

<length>
The maximum width, expressed as a <length>.
<percentage>
The maximum width, expressed as a <percentage> of the containing block's width.

Keyword values

none
The width has no maximum value.
max-content
The intrinsic preferred width.
min-content
The intrinsic minimum width.
fill-available
The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, available.)
fit-content
The same as max-content.

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 , lr-tb , rl , rb , rb-rl max-height
vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width

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.

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 syntax

<'max-width'>

Example

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 simply 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" class, which simply establishes coloring, padding, and their respective values of max-block-size.

<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.

.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

The two boxes look like this in the end:

Specification

Specification Status Comment
CSS Logical Properties and Values Level 1
The definition of 'max-block-size' in that specification.
Editor's Draft Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support 41.0 (41.0)[1] No support No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support 41.0 (41.0)[1] No support No support No support

[1] Introduced in Firefox 38, but disabled by default using the preference layout.css.vertical-text.enabled. Starting in Firefox 41, max-block-size is available by default, and the preference was removed in Firefox 51 (at which point the property can no longer be disabled).

See also

Document Tags and Contributors

Contributors to this page: mfluehr, Sheppy, chrisdavidmills, teoli, Sebastianz, fscholz, kscarfone
Last updated by: mfluehr,