max-block-size
max-block-size は、行が積み重なる向きの要素の大きさの上限を決めます。横書きでは max-height と、縦書きでは max-width と同じ働きになります。
構文
<'max-width'>プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
writing-mode: vertical-rl;
block-size: auto;
max-block-size: 5em;
}コントロール
max-block-size5em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
80pxなどの長さ：その長さより大きくしません。none：初期値です。上限を決めません。min-content・max-content・fit-content：ふつうの文章の箱では、どれも中身に合わせた大きさを上限にします。
収まらない中身はどうなる？
プレビューの箱は inline-size のページと同じく縦書き（writing-mode: vertical-rl）にしてあるので、行は右から左へ積み重なり、max-block-size が箱の幅の上限になります。補助の宣言の block-size: auto で幅を列の数に任せていますが、上限より多い列は箱の左へはみ出します。プレビューの箱は overflow: auto なので、はみ出した列は横にスクロールして読めます。
よく使う場面
メニューやコメント欄のように、長くなるとスクロールさせたい部分に使います。縦書きにしても、行が積み重なる向きの上限のまま働きます。
気をつけること
- 横書きでは
max-heightと、縦書きではmax-widthと同じものを決めるので、両方書くとあとに書いた方が効きます。 %は、親の同じ向きの大きさ（横書きなら高さ）に対する割合です。横書きで親の高さが決まっていないと効きません。min-block-sizeのほうが大きいときは、上限より下限が勝ちます。- 主要なブラウザすべてで使えます。