CSS | max-height Property

The max-height property in CSS is used to set the maximum height of an element. If the content of the element is larger than the specified maximum-height then the content will overflow otherwise it has no effect. If the content of the element is smaller then it has no effect. The height property value can be overridden by the max-height property.

Syntax:

max-height: none|length|initial|inherit; 

Property values:



  • none: It is the default value and does not contain max-height. It is synonymous to no maximum height specification.

    Syntax:

    max-height: none;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>max-height property</title>
              
            <style>
                p {
                    max-height:none;
                    border:1px solid black;
                    overflow:auto;
                }
            </style>
        </head>
      
        <body>
            <p>
                Prepare for the Recruitment drive of
                product based companies like Microsoft, 
                Amazon, Adobe etc with a free online 
                placement preparation course. The course
                focuses on various MCQ's & Coding question
                likely to be asked in the interviews & make
                your upcoming placement season efficient
                and successful.
            </p>
        </body>
    </html>

    chevron_right

    
    

    Output:
    max-height

  • length: This property is used to define the max-height in length. The length can be set using px, em etc.

    Syntax:

    max-height: length;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>max-height property</title>
              
            <style>
                p {
                    max-height:35px;
                    border:1px solid black;
                    overflow:auto;
                }
            </style>
        </head>
      
        <body>
            <p>
                Prepare for the Recruitment drive of
                product based companies like Microsoft, 
                Amazon, Adobe etc with a free online 
                placement preparation course. The course
                focuses on various MCQ's & Coding question
                likely to be asked in the interviews & make
                your upcoming placement season efficient
                and successful.
            </p>
        </body>
    </html>

    chevron_right

    
    

    Output:
    max-height

  • initial: This property is used to set the value of the max_height to its default value.

    Syntax:

    max-height: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>max-height property</title>
              
            <style>
                p {
                    max-height:initial;
                    border:1px solid black;
                    overflow:auto;
                }
            </style>
        </head>
      
        <body>
            <p>
                Prepare for the Recruitment drive of
                product based companies like Microsoft, 
                Amazon, Adobe etc with a free online 
                placement preparation course. The course
                focuses on various MCQ's & Coding question
                likely to be asked in the interviews & make
                your upcoming placement season efficient
                and successful.
            </p>
        </body>
    </html>

    chevron_right

    
    

    Output:
    max-height

  • inherit: This property is inherited from its parent.

Supported Browsers: The browser supported by max-height property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 7.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 2.0.2


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.