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>
Leave a Reply