CSS max-block-size 属性

定義と使用法

max-block-size 属性は要素のブロック方向上の最大サイズを指定します。

内容のブロック方向上のサイズが最大値より小さい場合、 max-block-size 属性値は効果がありません。

内容のブロック方向上のサイズが最大値を超えた場合、 max-block-size 属性値。

注意：関連する CSS 属性 writing-mode ブロック方向を定義し、 max-block-size 属性の結果に影響を与えます。英語のページでは、ブロック方向は下向き、インライン方向は左から右です。

CSS max-block-size 属性は CSS 属性 max-height および max-width 非常に似ているですが、 max-block-size 属性はブロック方向に依存します。

インスタンス

例1

以下の <div> 要素のブロック方向上の最大サイズを 60ピクセルに設定します：

div {
  max-block-size: 60px;
}

自分で試してみてください

例2：書き込みモード

<div> 要素の writing-mode 属性値が vertical-lr に設定されると、ブロック方向が側向から下向きに変わります。これにより、 max-block-size 属性の動作方法：

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

自分で試してみてください

例3：Max-block-size vs Block-size

以下の <div> 要素（block-size （幅が 100px）と別の <div> 要素（max-block-size （幅が 100px）の内容サイズが変化したときの異なる反応を観察します：

#div1 {
  max-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

自分で試してみてください

CSS文法

max-block-size: auto|length|initial|inherit;

属性値

技術的な詳細

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参考：CSS ブロックサイズ属性

参考：CSS min-block-size 属性

参考：CSS max-height 属性

参考：CSS max-width 属性

参考：CSS writing-mode 属性