CSS | max-block-size Property

Last Updated : 28 Jun, 2022

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.

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.

Below examples illustrate the max-block-size property in CSS:

Example 1:

html

<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS | max-block-size Property</title> 
    <style> 
        h1 { 
            color: green; 
        } 
        
        div { 
            background-color: green; 
            width: 200px; 
            height: 20px; 
        } 
        
        .one { 
            position: relative; 
            max-block-size: 10px; 
            background-color: cyan; 
        } 
    </style> 
</head> 

<body> 
    <center> 
        <h1>Geeksforgeeks</h1> 
        <b>CSS | max-block-size Property</b> 
        <br> 
        <br> 
        <div> 
            <p class="one"> 
                A Computer Science Portal for Geeks 
            </p> 
        </div> 
    </center> 
</body> 

</html>

Output:

Example 2:

html

<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS | max-block-size Property</title> 
    <style> 
        h1 { 
            color: green; 
        } 
        
        div { 
            background-color: green; 
            width: 200px; 
            height: 20px; 
        } 
        
        .one { 
            position: relative; 
            max-block-size: auto; 
            background-color: cyan; 
        } 
    </style> 
</head> 

<body> 
    <center> 
        <h1>Geeksforgeeks</h1> 
        <b>CSS | max-block-size Property</b> 
        <br> 
        <br> 
        <div> 
            <p class="one"> 
                A Computer Science Portal for Geeks 
            </p> 
        </div> 
    </center> 
</body> 

</html>