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