max-block-size
Quick Summary for 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.
Code Usage for max-block-size
/* <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(20em);  /* Global values */ max-block-size: inherit; max-block-size: initial; max-block-size: revert; max-block-size: unset; 
More Details for max-block-size

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

Syntax

/* <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(20em);  /* Global values */ max-block-size: inherit; max-block-size: initial; max-block-size: revert; 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(<length-percentage>)

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 , lr-tb , rl , rb , rb-rl max-height
vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl 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 value0
Applies tosame as width and height
Inheritedno
Percentagesblock-size of containing block
Computed valuesame as max-width and max-height
Animation typea length, percentage or calc();

Formal syntax

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

<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

Specifications

Specification
CSS Logical Properties and Values Level 1 # propdef-max-block-size

See also

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

Last modified: Feb 8, 2022, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語Русский Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Random CSS Property

justify-self

The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
justify-self css reference