max-height高さの上限
要素の使用高が指定値を上回らないように制限します。初期値noneでは上限を設けません。
max-height
要素が広がれる高さの上限を決めるプロパティ。内容が多い箱の上限を動かし、収まりきらない部分の扱いも確かめます。
遊んでみよう
height: 240pxと指定した上限を比較
MAX-HEIGHT
高さ240pxのカードへ、最大の高さを指定しています。
上限を超えた内容overflow: autoで確認CSS
.element max-height: 180px;
値のパターン
max-heightの構成要素
<length> | <percentage>長さと割合
pxなどの長さは固定の上限、%は高さが明示された包含ブロックを基準にした上限です。
height → max-height → min-height高さ指定の優先関係
max-heightはheightを上書きします。ただしmin-heightがmax-heightより大きい場合はmin-heightが優先されます。
早見表
初期値はnoneです。まずはpx・%と、上限を超えた内容をoverflowで扱う考え方を押さえます。
01
none高さを制限しない初期値02
260px長さで上限固定の最大高03
75%親の高さの4分の3まで親の高さが必要04
min-content内容の最小高を基準内容基準05
max-content内容の推奨高を基準内容基準06
fit-content利用できる空間へ収める内容と空間を考慮よくある使い方
01
長いメニューをスクロール可能にする
項目が多いメニューへ高さの上限とoverflowを指定し、ページ全体を覆わない一覧にできます。
.menu { max-height: 20rem; overflow: auto; }02
ダイアログを画面内へ収める
内容が増えても画面高を超えないよう上限を設け、本文部分をスクロールできるようにします。
.dialog { max-height: 80vh; overflow: auto; }03
画像の縦方向の広がりを抑える
縦長の画像が画面からはみ出さないよう最大高を指定し、縦横比を保ったまま縮めます。
.photo { width: auto; max-height: 70vh; }ポイント
上限を超えた内容は、消えるとは限らない。
max-heightは箱の高さを制限しますが、あふれた内容の表示方法までは決めません。必要に応じてoverflow: autoやhiddenを組み合わせます。文字を拡大したときに内容が切れたり重なったりしないかも確認しましょう。max-heightはheightより優先され、さらにmin-heightがmax-heightより大きい場合はmin-heightが優先されます。負の値は使えません。置換要素ではないinline要素、表の列、列グループを除く要素に適用でき、通常は子要素へ継承されません。
関連するCSSも見てみよう。
max-height と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。