CSS min-block-size Property

Description

The min-block-size CSS property is used to specify the minimum horizontal or vertical size of an element's block, depending on its writing mode. It is similar to the min-height and min-width properties, but it is more flexible because it can be used to set the minimum size in both the block and inline directions. The min-block-size property is useful for creating responsive layouts that can adapt to different screen sizes and devices. For example, you could use it to ensure that a button is always at least 50px wide, even on a small screen.

Initial value

0

Applies to

same as width and height

Inherited

no

Computed value

same as width and height

Animatable

a length, percentage or calc();

JavaScript syntax

object.style.minBlockSize

Interactive Demo

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;

Syntax

min-block-size: <min-width>  

Values

• <min-width>Defines the min-block-size as an value or percentage.

Example

<p class="exampleText">Example text</p>

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

Browser Support

The following table will show you the current browser support for the CSS min-block-size property.

Desktop
79	57	41	44	12.1

Tablets / Mobile
57	41	43	12.2	7	57

Last updated by CSSPortal on: 2nd January 2024