CSS

やさしい説明

min-inline-size は、要素の「横方向（インライン方向）」に対して「これ以上小さくならないようにする最小幅」を決めるプロパティです。

ふつう、width や min-width で幅を調整しますが、これらはページの書字方向（横書き／縦書き）に関係なく「物理的な横幅・縦幅」を扱います。

一方で、min-inline-size は「書字方向に合わせて動く幅」です。

たとえば横書きでは「横幅」を、縦書きでは「高さ」にあたる方向を自動的に見てくれます。

つまり、書字方向が変わっても「文字の並ぶ方向で最小サイズを保ちたい」ときに便利です。

ポイント

• 「インライン方向」とは、文字が並ぶ方向のこと（横書きなら横方向、縦書きなら縦方向）
• 要素がそれ以上つぶれないように、最小の幅（または高さ）を保証できる
• writing-mode に対応する、書字方向に依存したサイズ指定ができる

サンプルコード

.box {
    writing-mode: horizontal-tb; /* 横書き */
    min-inline-size: 200px; /* 横方向の最小サイズを200pxにする */
    border: 2px solid #333;
}

<div class="box">
    横書きのときは横幅が200pxより小さくならない
</div>

書字方向を縦に変えると、同じ指定でも縦方向に効く：

.box {
    writing-mode: vertical-rl; /* 縦書き */
    min-inline-size: 200px; /* 縦方向の最小サイズを200pxにする */
}