Max-height

We will learn how to use CSS max-height property in this chapter.

CSS max-height property sets the maximum height of an element. By using this property, we prevent the height property 's value from becoming larger than the value specified for max-height.

Meanwhile, we must know that CSS max-height property overrides height property and min-height property overrides CSS max-height property.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
        p {
            max-height: 2cm;
            overflow: auto;
          }
      </style>
   </head>
   <body>

      <p>Nam at tortor in tellus interdum sagittis. Cras varius. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
none It means that there is no maximum height. It is the default value of this property.
length It defines maximum height in px, pt, cm, etc.
% It defines maximum height in percent of the containing element.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.