max-heightプロパティの説明
CSSのmax-heightプロパティは、要素の高さの最大値を指定します。heightによる高さの指定がmax-heightの値を上回る場合は、これを打ち消します。逆に要素の高さがmax-heightに達していない時、その寸法を維持します。
要素の高さの最小値は、min-heightで指定します。
max-heightに指定できる値
<length>- CSSで使用できる長さを表すデータ型の値です。数値と単位を組み合わせた絶対値を指定できます。
<percentage>- 包含ボックスの高さを対象とした割合を示す値です。正の数値とパーセントで表します。
none- ボックスの寸法を制限しません。
max-content- 要素に含まれる内容が必要とする最大の高さを要求します。
min-content- 要素に含まれる内容が必要とする最小の高さを要求します。
fit-content(<length-percentage>)- 利用可能な空間に対して
fit-contentの式で計算を行い、指定された引数に置き換えます。結果は、min(max-content, max(min-content, <length-percentage>))と同じになります。
max-heightの使い方とサンプルコード
max-heightプロパティの構文は以下の通りです。
/* <length>値 */
max-height: 100px;
max-height: 10rem;
/* <percentage>値 */
max-height: 50%;
max-height: 33.3%;
/* キーワード値 */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content(10rem);
/* グローバル値 */
max-height: inherit;
max-height: initial;
max-height: revert;
max-height: unset;
max-heightの実例
それでは実際にmax-heightプロパティの書き方を見ていきましょう。以下の例は、heightで200pxの高さ指定を行ったボックスに、max-heightで制限を加えています。max-heightの値が、指定された高さを下回る場合はこれを制御し、上回る場合は指定された通りの寸法となります。
<div class="samp_box">
<div class="mh_1">
height: 200px;<br>
max-height: 100px;<br><br>
Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
</div>
<div class="mh_2">
height: 200px;<br>
max-height: 200px;<br><br>
Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
</div>
<div class="mh_3">
height: 200px;<br>
max-height: 300px;<br><br>
Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
</div>
</div>
.samp_box {
overflow: auto;
padding: 1rem;
background: #eee;
display: grid;
grid: auto / repeat(3, 1fr);
gap: 1rem;
}
.samp_box > div {
overflow: scroll;
height: 200px;
padding: .3rem;
background: #fff;
}
.mh_1 {
max-height: 100px;
}
.mh_2 {
max-height: 200px;
}
.mh_3 {
max-height: 300px;
}