Themin-block-sizeCSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either themin-width or themin-height property, depending on the value ofwriting-mode.

If the writing mode is vertically oriented, the value ofmin-block-size relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. A related property ismin-inline-size, which defines the other dimension of the element.

Try it

min-block-size: 150px;writing-mode: horizontal-tb;

min-block-size: 150px;writing-mode: vertical-rl;

min-block-size: 20px;writing-mode: horizontal-tb;

min-block-size: 15em;writing-mode: vertical-lr;

<section>  <div>    This is a box where you can change the minimum block size. <br />If there is    more content than the minimum the box will grow in the block dimension as    needed by the content.  </div></section>

#example-element {  display: flex;  flex-direction: column;  background-color: #5b6dcd;  justify-content: center;  color: white;}

Syntax

/* <length> values */min-block-size: 100px;min-block-size: 5em;min-block-size: anchor-size(self-inline);/* <percentage> values */min-block-size: 10%;/* Keyword values */min-block-size: max-content;min-block-size: min-content;min-block-size: fit-content;min-block-size: fit-content(20em);/* Global values */min-block-size: inherit;min-block-size: initial;min-block-size: revert;min-block-size: revert-layer;min-block-size: unset;

Values

Themin-block-size property takes the same values as themin-width andmin-height properties.

Formal definition

Formal syntax

min-block-size =
<'min-width'>

<min-width> =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>

<length-percentage> =
<length>|
<percentage>

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

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

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Examples

Setting minimum block size for vertical text

HTML

<p>Example text</p>

CSS

.exampleText {  writing-mode: vertical-rl;  background-color: yellow;  min-block-size: 200px;}

Result

Specifications

Browser compatibility

See also

• The mapped physical properties:min-width andmin-height
• writing-mode