min-block-size
min-block-size sets a lower limit on the size of an element in the direction its lines stack. In horizontal text it works like min-height, and in vertical text like min-width.
Syntax
<'min-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;
min-block-size: 20em;
}Controls
min-block-size20em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
- A length such as
20em: never smaller than that. auto: the initial value. On an ordinary block element it sets no limit (the same as 0). On flex and grid items it can keep the item from shrinking below its content (as min-height does).min-content,max-contentandfit-content: on an ordinary box of text, all of these use the size of the content as the limit.
As on the inline-size page, the preview box is vertical (writing-mode: vertical-rl), so lines stack from right to left and min-block-size is a lower limit on its width. The helper block-size: auto leaves the width to the number of columns, but even with little content the box is never narrower than the limit. Remove the helper writing-mode from the code to make it horizontal, and it limits the height instead.
When to use it
To keep cards or sections at a certain size even with little content. In vertical text, it still limits the direction lines stack in.
Watch out
- It sets the same thing as
min-heightin horizontal text andmin-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. - Works in all major browsers.