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