CSS - max-block-size Property
CSS - max-block-size Property
CSS max-block-size property sets the maximum block size of an element. The direction of the block is determined by the writing-mode property. The property has no effect, if the content fits well within the block.
Syntax
max-block-size: auto | length | percentage | initial | inherit;Property Values
| Value | Description |
|---|---|
| auto | No height limit is set with this value. Default. |
| length | It sets the max-block-size of the element using length units (e.g. px, em, rem etc.) |
| percentage | It sets the max-block-size of the element using percentage value relative to the size of the containing element. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Max Block Size Property
The following examples explain the max-block-size property with different values.
Max Block Size Property with Auto Value
To not set any specific limit on the block-size of an element, we use the auto value. The size of the block depends on the length of the content. This is shown in the following example.
Example
Max Block Size Property with Length Values
To set the size of the block of an element, we can specify the size using length units (e.g. px, em, rem etc.). The specified size will be applied to the block. If the content is greater than the size of the block, it will overflow. This is shown in the following example.
Example
Max Block Size Property with Percentage Values
To set the size of the block of an element, we can specify the size using percentage value (e.g. 10%) relative to the size of the containing element. The specified size will be applied to the block. If the content is greater than the size of the block, it will overflow. This is shown in the following example.
Example
Max Block Size Property with Writing Mode
The max-block-size property can be used in combination with the writing-mode property which determines the block direction. In horizontal-mode, the block-size grows from top to bottom. In vertical-mode, the block-size grows from left to right. This is shown in the following example.
Example
Supported Browsers
| Property | |||||
|---|---|---|---|---|---|
| max-block-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 |