The max-block-size property in CSS specifies the maximum size an element can have along the block direction. In most horizontal writing modes, it behaves similarly to the max-height property.
- Limits the maximum size of an element along the block axis.
- Behaves like max-height in horizontal writing modes and adapts to different writing directions.
- Supports length values, percentages, and keywords for flexible layouts.
Syntax:
max-block-size: length | percentage | auto | none | min-content |
max-content | fit-content | inherit | initial | unset;
Property values
- length: It sets a fixed value defined in px, cm, pt etc. Negative values are allowed. Its default value is 0px.
- percentage (%): It is the same as length but the size is set in term of percentage of the window size.
- auto: It is used when it is desired that the browser determines the block-size.
- none: It is used when you don't want to limit on the size of the box.
- max-content: It is used when you preferred max-width on the size of the box.
- min-content: It is used when you preferred min-width on the size of the box.
- fit-content: It is used when you preferred exact-width on the size of the box.
- initial: It is used to set the value of the max-block-size property to its default value.
- inherit: It is used when it is desired that the element inherits the max-block-size property of its parent as its own.
- unset: It is used unset the default max-block-size.
Examples of max-block-size property in CSS
Here are some example discussed:
Example 1: Demonstrates the max-block-size property by limiting the maximum block size of an element and hiding content that exceeds the specified size.
Example 2: Use of the max-block-size property to limit the maximum block size of an element while allowing its content to wrap within the specified size.
