Свойство max-height

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


8.0+	1.0+	4.0+	2.0+	1.0+	2.1+	2.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	+	+	+

Для чего используется?

Свойство устанавливает наибольшее значение высоты, которое возможно. Если содержимое блока растянет его больше значения максимальной высоты, то значения высоты будет соответствовать рассматриваемому свойству. Для большей оптимизации работы этого свойства, используют еще height и min-height, принцип работы которых заключается в следующем:

если высота блока попадает в интервал, заданный значениями max-height и min-height, то браузер оставляет параметр без изменений.
если высота превышает указанное максимальное значение, то браузер считывает показатель свойства max-height и присваивает его рассматриваемому блоку.
если высота оказывается меньше указанного минимального значения, то браузер считывает показатель свойства min-height и присваивает его рассматриваемому блоку.

Как правильно задавать?

max-height:максимальная высота;

Какие могут быть значения?

Для максимальной высоты используют пиксели и проценты.

none - отключает действие свойства.
inherit - повторяет параметры родителя.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство max-height</title>
  <style>
   div {
    overflow: auto;
    padding: 5px;
    max-height: 50px;
    background: #ffe;
    border: 1px dashed #7cdfd0;
   }
  </style>
 </head>
 <body>
  <div>
    Свойство фиксирует предельно возможную высоту для объекта. При чем
 это пограничное значение, которое браузер не позволяет превышать.
 Обычно, помимо указанного свойства, используются height и min-height.
  </div>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Размеры