Note that max-height and height should not be applied to the same element using the same unit, as one will override the other. For example, if the height is set to 150px and the max-height set to 60px, the actual height of the element is 60px, and the height declaration becomes redundant:

#example {
  max-height: 60px;
  height: 150px;
}

In the above example, the height of the element will be fixed at 60px.

However, it is acceptable (although it may not be entirely useful) to set max-height and height when the values are different units:

#example {
  max-height: 10em;
  height: 138px;
}

The height in the above example will be whichever is the smaller of the values.

Since the max-height declaration is based on em units, at some stage (due to text resizing) the em height may be smaller than the 138px height we’ve set. In cases such as these, the element will be allowed to shrink from the 138px height, thus keeping track with the em-based text. See the entry on min-height for the reverse of this scenario.