CSS min-block-size property

Definition and usage

min-block-size The attribute specifies the minimum size of the element in the block direction.

property value will be applied. min-block-size If the size of the content in the block direction is less than the minimum size, then

property value. min-block-size If the size of the content in the block direction is greater than the minimum size, then

The property value does not take effect.Note: Sets the block direction of the <div> element to vertical-rl: related CSS properties min-block-size Defining the block direction affects

properties result. For English pages, the block direction is downward, and the inline direction is from left to right. min-block-size CSS properties are similar to CSS properties min-height and min-width min-block-size Very similar, but

The property depends on the block direction.

Instance

Example 1

div {
  min-block-size: 200px;
}

Try It Yourself

Sets the minimum size of the <div> element in the block direction to 200 pixels:

Example 2: Writing Mode Sets the block direction of the <div> element to vertical-rl: writing-mode min-block-size How the property works: when the property value is set to vertical-rl, the block direction changes from downward to lateral, which affects

div {
  min-block-size: 200px;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 3: min-block-size and block-size

Observe a <div> element (block-size set to 100px) and another <div> element (min-block-size Different reactions when the content size changes (set to 100px):

#div1 {
  min-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

Try It Yourself

CSS Syntax

min-block-size: auto|length|initial|inherit;

Property Value

Value Description
auto Default. The default min-block-size value of the element.
length Specifies min-block-size, in units such as px, pt, cm, etc. See:CSS Units.
% Specifies the percentage of the size of the corresponding axis relative to the parent element for min-block-size.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation Creation: Supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.minBlockSize="10px"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Related Pages

Reference:CSS block-size Attribute

Reference:CSS max-block-size property

Reference:CSS min-height property

Reference:CSS min-width property

Reference:CSS writing-mode attribute