CSS - max-height Property

Quiz

CSS max-height property sets the maximum height of an element. The content overflows, if it exceeds the maximum height of an element. If the content fits well within the maximum height of an element, there is no effect. The overflow property can be used to control the overflow of the content.

Syntax

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

Property Values

Value	Description
none	It sets no limit to the height of the element. Default.
length	The maximum height of an element is set using length units (e.g. px, em, rem etc.), the content of the element cannot exceed this value.
percentage	The maximum height of an element is set using percentage values (e.g. 10%) relative to the size of the container, the content of the element cannot exceed this value.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Max Height Property

The following examples explain the max-height property with different values.

Max Height Property with None Value

To not set any limit on the height of an element, we can use the none value. The defined height will be applied to the element. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         width: 300px;
         height: 120px;
         padding: 5px;
         max-height: none;
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-height property
   </h2>
   <h4>
      max-height: none (the defined height 
      value will be applied)
   </h4>
   <div class="container">
      TutorialsPoint is an online platform offering free 
      tutorials and resources on various topics including 
      programming, web development, and data science. It 
      provides structured lessons, examples, and quizzes 
      for effective learning.
   </div>
</body>
</html>

Max Height Property with Length Values

To set the maximum limit on the height of an element, we can specify the maximum height value using length units (e.g. px, em, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         width: 300px;
         height: 120px;
         padding: 5px;
         background-color: lightgreen;
      }

      .ex1 {
         max-height: 75px;
      }

      .ex2 {
         max-height: 105px;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-height property
   </h2>
   <h4>
      max-height: 75px (the maximum height is 75px, 
      if content is larger it will overflow as shown below)
   </h4>
   <div class="container ex1">
      TutorialsPoint is an online platform offering free 
      tutorials and resources on various topics including 
      programming, web development, and data science. It 
      provides structured lessons, examples, and quizzes 
      for effective learning.
   </div>
   <br/>
   <h4>
      max-height: 105px (the maximum height is 105px, 
      in the following example content is not greater 
      than the height, so no overflow occurs.)
   </h4>
   <div class="container ex2">
      TutorialsPoint is an online platform offering free 
      tutorials and resources on various topics including 
      programming, web development, and data science. It 
      provides structured lessons, examples, and quizzes 
      for effective learning.
   </div>
</body>
</html>

Max Height Property with Percentage Values

To set the maximum limit on the height of an element, we can specify the maximum height value using percentage values (e.g. 10%) relative to the size of the containing element. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer-container {
         width: 300px;
         height: 100px;
         padding: 5px;
      }

      .inner-container {
         width: 100%;
         height: 100%;
         position: relative;
      }

      .color {
         background-color: lightgreen;
      }

      .ex1 {
         max-height: 55%;
      }

      .ex2 {
         max-height: 115%;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-height property
   </h2>
   <h4>
      max-height: 55% (the maximum height is 55% of 
      the inner-container's height, content overflows, 
      if it is larger than the max-height as in this case.)
   </h4>
   <div class="outer-container">
      <div class="inner-container">
         <div class="ex1 color">
            TutorialsPoint is an online platform offering free 
            tutorials and resources on various topics including 
            programming, web development, and data science. It 
            provides structured lessons, examples, and quizzes 
            for effective learning.
         </div>
      </div>
   </div>
   <br/>
   <h4>
      max-height: 115% (the maximum height is 115% of 
      the inner-container's height, content does not 
      overflow as max-height accomodates all the content)
   </h4>
   <div class="outer-container">
      <div class="inner-container">
         <div class="ex2 color">
         TutorialsPoint is an online platform offering free 
         tutorials and resources on various topics including 
         programming, web development, and data science. It 
         provides structured lessons, examples, and quizzes 
         for effective learning.
         </div>
      </div>
   </div>
</body>
</html>

Supported Browsers

Property
max-height	1.0	7.0	1.0	2.0.2	7.0

css_reference.htm

Print Page