CSS

やさしい説明

max-block-size は、「縦方向（ブロック方向）の最大サイズを決めるプロパティ」です。

たとえば、縦に伸びる要素（段落やボックス）があっても、「これ以上は大きくならないようにしてね」という上限を決められます。

この「ブロック方向」というのは、文章の流れに対して垂直の方向（普通の横書きなら“縦方向”）のことです。

つまり、横書きなら高さ、縦書きなら幅のことを指します。

イメージしやすい例

段落（pタグなど）にたくさんのテキストが入っていても、指定した上限を超えないようにして、あふれた分はスクロールしたり、隠したりできます。

こう書けばOK！

.box {
    max-block-size: 200px;
    overflow: auto;
}

この例では、縦方向のサイズが 200px を超えないようにし、それ以上の内容はスクロールで見られるようにしています。

ポイント

• max-block-size は「高さの上限」っぽい動きですが、縦書きでもちゃんと対応できるのが特徴です。
• 同じようなものに max-height がありますが、それは「物理的な高さ」を意味します。
  一方、max-block-size は「書字方向に依存する柔軟な上限」です。
• 国際化対応（横書き／縦書き両方）を考えるなら、max-height よりも max-block-size の方が便利です。