max-block-size - CSS | MDN (original) (raw)

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 class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    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

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

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

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()

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

=
|

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

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

=
|
<calc-size()> |
any |

=
[ '+' | '-' [] []](/en-US/docs/Web/CSS/Guides/Values%5Fand%5Funits/Value%5Fdefinition%5Fsyntax#brackets "Brackets: enclose several entities, combinators, and multipliers to transform them as a single component")*

=
[ '*' | / [] []](/en-US/docs/Web/CSS/Guides/Values%5Fand%5Funits/Value%5Fdefinition%5Fsyntax#brackets "Brackets: enclose several entities, combinators, and multipliers to transform them as a single component")*

=
|
|
|
|
( )

=
e |
pi |
infinity |
-infinity |
NaN

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

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

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