CSS max-block-size property

Previous Page mask-type
Next Page max-height

Definition and Usage

max-block-size property specifies the maximum size of the element in the block direction.

If the size of the content in the block direction is less than the maximum value, then max-block-size The property value does not take effect.

property value is applied. max-block-size If the size of the content in the block direction is greater than the maximum value, the

Property Value.Note: writing-mode related CSS properties max-block-size Define the block direction, which affects

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

The property depends on the block direction.

Instance

Example 1

div {
  max-block-size: 60px;
}

Try It Yourself

Example 2: Writing Mode

Sets the maximum size of the <div> element in the block direction to 60 pixels: writing-mode When the property value is set to vertical-lr, the block direction changes from downward to lateral, which affects max-block-size How the property works:

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

Try It Yourself

Example 3: Max-block-size vs Block-size

Observe a <div> element (block-size and another <div> element (max-block-size Different reactions at the content size change for 100px (

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

Try It Yourself

CSS Syntax

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

Property Value

Value	Description
auto	Default. The default max-block-size value of the element.
length	Specifies max-block-size, in units such as px, pt, cm, etc. See:CSS Units.
%	Specifies the percentage of the size along the corresponding axis relative to the parent element for max-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.maxBlockSize="60px"