max-block-sizeで要素の大きさを制限：calc関数やviewportユニットとの組み合わせで、さらに柔軟なレイアウトを実現

書字方向が横書きの場合

• max-height プロパティと同様の動作をします。
• max-block-size は要素の最大高さを制限します。

書字方向が縦書きの場合

• max-width プロパティと同様の動作をします。
• max-block-size は要素の最大幅を制限します。

max-block-size の値

max-block-size の値には、以下のものがあります。

• initial
  初期値。ブラウザによって異なりますが、通常は要素の本来のサイズに設定されます。
• auto
  最大ブロックサイズを制限しません。要素の本来のサイズに任せます。
• パーセンテージ
  親要素のブロックサイズの割合で設定します。
• 長さ
  ピクセル (px)、em、rem など。要素の最大ブロックサイズを具体的な長さで設定します。

max-block-size の書き方

max-block-size プロパティは、以下のよう記述します。

selector {
  max-block-size: <値>;
}

例

以下の例では、要素 .box の最大高さを 200px に設定しています。

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

max-block-size の注意点

• max-block-size プロパティは、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、互換性のために max-height または max-width プロパティも併用することをお勧めします。
• max-block-size プロパティは、writing-mode プロパティの影響を受けます。
• max-block-size プロパティは、min-block-size プロパティと併用して使用できます。

max-block-size プロパティは、要素の最大ブロックサイズを制限することで、レイアウトを制御することができます。書字方向によって高さと幅のどちらを制限するかが決まるため、柔軟なレイアウトが可能です。

---

.box {
  max-block-size: 250px;
}

例2：要素の最大高さを親要素のサイズの割合で設定する

この例では、.box クラスの要素の最大高さを親要素のサイズの 50% に設定します。

.box {
  max-block-size: 50%;
}

例3：要素の最大高さを「auto」に設定する

この例では、.box クラスの要素の最大高さを制限しません。要素の本来の高さに任せます。

.box {
  max-block-size: auto;
}

例4：max-block-size と min-block-size を併用する

この例では、.box クラスの要素の最小高さを 100px、最大高さを 300px に設定します。

.box {
  min-block-size: 100px;
  max-block-size: 300px;
}

例5：書字方向が縦書きの場合の max-block-size

この例では、.box クラスの要素の書字方向を縦書きに設定し、最大幅を 500px に設定します。

.box {
  writing-mode: vertical-rl;
  max-block-size: 500px;
}

これらの例は、max-block-size プロパティの様々な使い方を示しています。実際の使用例では、状況に合わせて適切な値を設定してください。

---

max-height と max-width を組み合わせる

書字方向によって max-block-size が height または width に相当することを利用し、max-height と max-width プロパティを組み合わせることで代替することができます。

.box {
  max-height: 250px; /* 横書きの場合 */
  max-width: 500px; /* 縦書きの場合 */
}

calc() 関数を使用する

calc() 関数を使用して、親要素のサイズに基づいて要素の最大ブロックサイズを動的に計算することができます。

.box {
  max-block-size: calc(50% * parent-element-size);
}

viewport ユニットを使用する

viewport ユニット (vw, vh) を使用して、ウィンドウサイズの割合で要素の最大ブロックサイズを設定することができます。

.box {
  max-block-size: 50vw; /* 横幅の50% */
  max-block-size: 80vh; /* 縦幅の80% */
}

• calc() 関数や viewport ユニットを使用する場合は、ブラウザの互換性を考慮する必要があります。
• 上記の代替方法は、max-block-size プロパティと同じ挙動を保証するものではありません。