max-heightプロパティ

max-heightプロパティは要素の最大の高さを指定するプロパティです。

max-heightプロパティに指定できる値

max-heightプロパティには次の値を設定することができます。

max-heightプロパティを「10px」、heightプロパティを「auto(初期値)」と指定した場合の例です。
max-heightプロパティを指定している場合は要素の内容に関わらず10pxを最大の高さとして調整します。

.parent {
  height: 50px;
}
.box1 {
  height: auto;
  max-height: 10px;
}

<div class="parent">
  <p class="box1">max-heightプロパティのテスト</p>
</div>

max-heightプロパティを「20%」で指定した場合の例です。
「20%」と指定した場合、親要素の高さ20%（今回の例では10px）を最大の高さとします。

.parent {
  height: 50px;
}
.box2 {
  height: auto;
  max-height: 20%;
}

<div class="parent">
  <p class="box2">widthプロパティのテスト</p>
</div>