CSS | max-block-size Property
The CSS max-block-size property is used to create the maximum size of an element in the direction opposite that of the writing direction. Like if the writing direction is horizontal then max-block-size is equivalent to max-height, and if it is in vertical mode then equal to max-width.
max-block-size: length | percentage | auto | none | min-content | max-content | fit-content | inherit | initial | unset;
- 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.
Below examples illustrate the max-block-size property in CSS:
Supported Browsers: The browsers supported by max-block-size property are listed below:
- Google Chrome