max-block-size
max-block-size sets an upper limit on the size of an element in the direction its lines stack. In horizontal text it works like max-height, and in vertical text like max-width.
Syntax
<'max-width'>Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
writing-mode: vertical-rl;
block-size: auto;
max-block-size: 5em;
}Controls
max-block-size5em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
- A length such as
80px: never larger than that. none: the initial value. No upper limit.min-content,max-contentandfit-content: on an ordinary box of text, all of these use the size of the content as the limit.
What happens to content that does not fit?
As on the inline-size page, the preview box is vertical (writing-mode: vertical-rl), so lines stack from right to left and max-block-size is an upper limit on its width. The helper block-size: auto leaves the width to the number of columns, but columns beyond the limit overflow to the left of the box. The preview box has overflow: auto, so you can scroll sideways to read them.
When to use it
For parts such as menus or comment lists that should scroll once they get long. In vertical text, it still limits the direction lines stack in.
Watch out
- It sets the same thing as
max-heightin horizontal text andmax-widthin vertical text, so when both are written, the later one wins. - A
%is a share of the parent's size in the same direction (its height in horizontal text). In horizontal text, it has no effect unless the parent's height is set. - When
min-block-sizeis larger, the lower limit wins over the upper one. - Works in all major browsers.