“max-height”プロパティ:最大の高さ

概要

“max-height”プロパティは要素の高さ、垂直方向の大きさの最大値を指定するプロパティです。

“height”プロパティの値が“max-height”プロパティの値を超える場合は“max-height”プロパティの値が高さになります。“max-height”プロパティの値が“min-height”プロパティの値よりも小さい場合は“min-height”プロパティが優先されます。

“max-height”プロパティは既定ではコンテント・ボックスの高さを指定します。“max-height”プロパティで指定した高さをボーダー・ボックスの高さとしたい場合は“box-sizing: border-box;”を適用します。

サンプルコード

値

値	説明
キーワード値
none	制限しない
min-content	【横書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが高さを計算します
	【縦書きの場合】コンテンツをはみ出さずに内包できる最小の高さ (許容される箇所ですべて折り返した時にコンテンツを内包できる最小の高さ)
max-content	【横書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが高さを計算します
	【縦書きの場合】要素の理想的な高さ (コンテンツを折り返さずに内包できる最小の高さ)
stretch	マージン・ボックスの高さが使用可能な領域の高さをすべて占有するように高さを計算 (左右のマージンは折りたたまれず、“auto”の場合は“0”として扱われます。)
fit-content	“min-content”と“stretch”のうちの大きい方と“max-content”を比べた時の小さい方の値と同じ
contain	アスペクト比が指定されていればその制約の中でマージン・ボックスの高さが使用可能な領域の高さをできる限り占有するように高さを計算 (アスペクト比が指定されていなければ“stretch”と同じです。)
“<length-percentage>”値
<length>	“px”、“vh”などで高さを指定
<percentage>	内包される包括ブロックの高さを“100%”として高さを指定
他の値
fit-content()	“fit-content()”関数で高さを指定
共通キーワード

仕様書

定義されている仕様書

max-height

<length>
<percentage>
none
min-content
max-content
fit-content()
stretch
fit-content
contain

制限しない

div {

resize: both;
overflow: hidden;
max-height: none;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

高さを内容に合わせる

横書きの場合

div {

resize: both;
overflow: hidden;
max-height: min-content;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

div {

resize: both;
overflow: hidden;
max-height: max-content;
writing-mode: horizontal-tb;

}

In spring, dawn is the most beautiful moment.

縦書きの場合

div {

resize: both;
overflow: hidden;
max-height: min-content;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

div {

resize: both;
overflow: hidden;
max-height: max-content;
writing-mode: vertical-rl;

}

In spring, dawn is the most beautiful moment.

高さを内包される領域に合わせる

div {

resize: both;
margin: 10px;
width: stretch;

}

In spring, dawn is the most beautiful moment.

div {

resize: both;
margin: 10px;
max-height: fit-content;

}

In spring, dawn is the most beautiful moment.

div {

resize: both;
aspect-ratio: 1/1;
margin: 10px;
max-height: contain;

}

In spring, dawn is the most beautiful moment.

“<length>”値で指定する

div {

resize: both;
overflow: hidden;
max-height: 200px;

}

In spring, dawn is the most beautiful moment.

“<percentage>”値で指定する

div {

resize: both;
overflow: hidden;
max-height: 50%;

}

In spring, dawn is the most beautiful moment.

“fit-content”関数で指定する

div { max-height: fit-content(200px);}


In spring, dawn is the most beautiful moment.