Max-Height プロパティ
最終更新：2026-09-13
max-height Max-Height プロパティ
max-height プロパティは要素の最大高さを設定し、高くなりすぎてレイアウトを破壊するのを防ぎます。初期値の none は上限がないことを意味します。これは overflow:auto と組み合わせて、上限を超えるコンテンツにスクロールバーを表示させることがよくあり、固定高さのスクロール領域で一般的なパターンです。
| カテゴリ | |
|---|---|
| 初期値 | none |
| 継承 | いいえ |
| 適用対象 | non-replaced |
| アニメーションタイプ | length |
| CSS バージョン | CSS2 |
| 状態 | 標準 |
📝 構文
max-height: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
none | キーワード | 最大高さの制限なし。 |
<length> | タイプ | 固定された最大高さ。 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： max-height は overflow と併用する必要があります。そうでなければコンテンツがコンテナから溢れます。
❓ よくある質問
Qmax-height と height の両方を設定するとどうなりますか？
A実際の高さは両者の小さい方です。height:100px かつ max-height:80px のときは 80px で描画され、height:100px かつ max-height:150px のときは 100px で描画されます。コンテンツが設定高さより短い場合、要素はコンテンツの高さになります。高さを上限に抑えつつ溢れも処理するには、overflow プロパティも必要です。そうでなければ余分な部分が見えたまま溢れます。
Q高さ固定のスクロール領域を作るにはどうすればよいですか？
Aコンテナに max-height と overflow-y:auto を指定します。例えば .list { max-height:300px; overflow-y:auto; } です。コンテンツが 300px 未満ならスクロールバーは表示されず、上限を超えると縦スクロールバーが現れます。これはチャット履歴や通知リストなどの標準的なパターンです。max-height は height より優れており、コンテンツが短ければ空白が残らず、長くてもスクロールします。
Qテキストが溢れたときに省略記号を表示するにはどうすればよいですか？
A1行の場合は white-space:nowrap と overflow:hidden、text-overflow:ellipsis を組み合わせます。複数行の場合は -webkit-line-clamp:2 を -webkit-box 系のプロパティと overflow:hidden とともに使います。これは -webkit- 接頭辞に依存します。どちらの場合も溢れたテキストは切り取られて省略記号に置き換えられ、隠れた残りはスクロールして見ることはできないため、全文は title 属性に用意しておくとよいでしょう。
Qmax-height を 0 に設定できますか？
Aはい。max-height:0 は要素の高さを 0 に折りたたみ、折りたたみ／展開アニメーションによく使われます。最初に max-height:0 と overflow:hidden で隠し、十分大きな値へ遷移して展開します。これは CSS の高さアニメーションの古典的なハックです。近年では grid-template-rows を 0fr と 1fr の間で遷移させる方が、任意の max-height 値に依存せず同じ効果が得られて優れています。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
