CSS - max-block-size Property

CSS max-block-size property sets the maximum size of an element in the opposite direction to its writing direction provided by writing_mode. For horizontal writing, it is equivalent to max-height, while for vertical writing, it is the same as max-width.

The max-inline-size property defines the maximum length for the other dimension.

It's helpful to set max-width and max-height for horizontal and vertical sizes, respectively.

When using max-height or max-width, opt for max-block-size for content's maximum height and max-inline-size for maximum width. Check out writing_mode examples to see the various writing modes.

Possible Values

You can set the value of the max-block-size property to any value that's allowed for the max-height and max-width values.

  • <length> − Sets the max-block-size to an absolute value.

  • <percentage> − Sets the max-block-size as a percentage of the block axis's containing block's size.

  • none − There is no size limit for the box.

  • max-content − The intrinsic max-block-size.

  • min-content − The minimum max-block-size.

  • fit-content − Available space up to the max-content, but never exceeds the min(max-content, max(min-content, stretch)).

  • fit-content(<length-percentage>) − Fit-content formula is used with the provided argument in place of the available space, i.e. min(max-content, max(min-content, argument)).

Applies To

Same as height and width.

Syntax

<length> Values

max-block-size: 300px;
max-block-size: 25em;

<percentage> Values

max-inline-size: 40%;

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

CSS max-block-size - writing-mode Effects

The following are the ways in which the writing-mode values affect the mapping of max-block-size to max-height or max-width:

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
CSS Writing Modes Level 3 specification eliminated the writing-mode values sideways-lr and sideways-rl late in the design process. They may be recovered at Level 4.
Only SVG 1.x contexts may utilise the writing modes lr, lr-tb, rl, rb, and rb-tl; HTML contexts are no longer permitted for their use.

CSS max-block-size - <length> Value

The following example demonstrates the max-block-size: 80px property sets the height of the div element to a maximum of 70px −

<html>
<head>
<style>
   div {
      background-color: orange;
      border: 2px solid blue;
      max-block-size: 80px;
   }
</style>
</head>
<body>
   <div>
      <h3>Tutorialspoint</h3>
      <h4>CSS max-block-size: 80px</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </div>
</body>
</html>

CSS max-block-size - <percentage> Value

The following example demonstrates the max-block-size: 80% property sets the height of the div element to a maximum of 80% −

<html>
<head>
<style>
   div {
      background-color: violet;
      border: 2px solid blue;
      max-block-size: 80%;;
   }
</style>
</head>
<body>
   <div>
      <h2>Tutorialspoint</h2>
      <h3>CSS max-block-size: 80%</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </div>
</body>
</html>

CSS max-block-size - <max-content> Value

The following example demonstrates the max-block-size: max-content property allowed the height of the div element to expand vertically to fit the content −

<html>
<head>
<style>
   div {
      background-color: violet;
      border: 2px solid blue;
      max-block-size: max-content;
   }
</style>
</head>
<body>
   <div>
      <h2>Tutorialspoint</h2>
      <h3>CSS max-block-size: max-content</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </div>
</body>
</html>

CSS max-block-size - With Horizontal and Vertical Text

The following example demonstrates how to use max-block-size property with writing-modes to display text in horizontal and vertical directions −

<html>
<head>
<style>
   div {
      background-color: yellow;
      border: 2px solid blue;
      margin: 10px;
      padding: 5px;
      max-block-size: 150px;
      min-block-size: 120px;
   }
   .box1 {
      writing-mode: horizontal-tb;
   }
   .box2{
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <div class="box1">
      <h3>CSS max-block-size with writing-mode: horizontal-tb</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
   </div>
   <div class="box2">
      <h3>CSS max-block-size with writing-mode: vertical-rl.</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
   </div>
</body>
</html>
Advertisements