ボックス
max-height
max-height は要素の高さの上限を決めます。中身が少ないうちは中身の高さに合わせ、多くなっても上限より高くはなりません。overflow と組み合わせて、長い中身をスクロールさせるときによく使います。
構文
none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
height: auto;
max-height: 5em;
}コントロール
max-height5em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
80pxなどの長さ：その高さより高くしません。none：上限を決めません。初期値です。min-content・max-content・fit-content：横書きの高さでは、どれも中身の高さを上限にします。
収まらない中身はどうなる？
このページのプレビューでは、高さを height: auto で中身に任せた箱に max-height を足しています。中身が上限より多いと、収まらない分は箱からはみ出します。プレビューの箱は overflow: auto なので、はみ出した分はスクロールで読めます。メニューやコメント欄のように、長くなるとスクロールさせたい部分に使います。
50% のような % は、親の高さが決まっているときだけ効くので、このページでは選べるようにしていません。プレビューの箱の右下のつまみで高さを広げても、max-height で止まります。