CSS max-inline-size 属性

定義と使用方法

max-inline-size 属性は要素の行内方向上の最大サイズを指定します。

内容の行内方向上のサイズが最大サイズより小さい場合、 max-inline-size 属性値は無効です。

内容の行内方向上のサイズが最大サイズを超える場合、 max-inline-size 属性値。

注意：関連するCSS属性 writing-mode 行内方向を定義し、これにより max-inline-size 属性の結果です。英語ページでは、ブロック方向は下向きで、行内方向は左から右です。

CSS max-inline-size 属性はCSS属性 max-height そして max-width 非常に似ているが、 max-inline-size 属性は行内方向に依存しています。

例

例1

次の<div>要素の行内方向上の最大サイズを60ピクセルに設定します：

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

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

例2：書き込みモード

次の<div>要素の writing-mode 属性値がvertical-rlに設定されている場合、行内方向が側向から下方向に変わります。これにより、 max-inline-size 属性の動作方法：

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

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

例3：max-inline-size vs inline-size

次の<div>要素（inline-size と別の<div>要素（max-inline-size 内容のサイズが変更されたときの、100px（

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

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

CSS文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSSインラインサイズ属性

参照：CSS min-inline-size 属性

参照：CSS max-height 属性

参照：CSS max-width 属性

参照：CSS writing-mode 属性