Open In App

CSS max-height Property

Improve
Improve
Like Article
Like
Save
Share
Report

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. 
  • length: This property is used to define the max-height in length. The length can be set using px, em etc. 
  • initial: This property is used to set the value of the max_height to its default value.
  • inherit: This property is inherited from its parent. 

Example: In this example, we are using the max-height: none property.

html




<!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>


Output: max-height

Example: In this example, we use max-height: length; property.

html




<!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>


Output: max-height

Example: In this example, we are using max-height: initial property.

html




<!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>


Output: max-height

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

  • Google Chrome 18.0
  • Edge 12.0
  • Internet Explorer 7.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.3


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads