max-height

max-height は CSS のプロパティで、要素の最大高を設定します。これは height プロパティの使用値が、 max-height に指定した値を上回ることを防ぎます。

max-height は height を上書きしますが、 min-height は max-height を上書きします。

構文

/* <length> 値 */
max-height: 3.5em;

/* <percentage> 値 */
max-height: 75%;

/* キーワード値 */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content(20em);

/* グローバル値 */
max-height: inherit;
max-height: initial;
max-height: unset;

値

<length>

max-height を絶対的な値で定義します。

<percentage>

max-height を包含ブロックの高さに対するパーセント値で定義します。

auto

ブラウザーは指定された要素の max-height を計算して選択します。

none

ボックスの寸法を制限しません。

max-content

内容物が推奨する max-height です。

min-content

内容物の最小の max-height です。

fit-content(<length-percentage>)

利用可能な空白をして死された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。

形式文法

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
where 
<length-percentage> = <length> | <percentage>

例

table { max-height: 75%; }

form { max-height: none; }

アクセシビリティの考慮事項

ページを拡大縮小して文字サイズを拡大した際に、 max-height を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。

• MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

仕様書

ブラウザーの互換性

関連情報

• The box model, box-sizing
• height, min-height