CSS Reference

contain-intrinsic-inline-size

サイズ封じ込め対象要素のインラインサイズを指定する

contain-intrinsic-inline-size プロパティは、要素がサイズ封じ込めの対象となっている場合に、ブラウザがレイアウトに使用することができる包含ボックスのインラインサイズを指定します。インラインサイズとは、書字方向に対して水平方向のサイズです。横書きの場合は幅、縦書きの場合は高さとなります。

指定できる値は、none （既定値）、auto、<length> データ型の値、もしくは auto と <length> データ型の値の組み合わせです。

具体的には下記のような記述になります。

contain-intrinsic-inline-size: none;
contain-intrinsic-inline-size: 1000px;
contain-intrinsic-inline-size: 10rem;
contain-intrinsic-inline-size: auto 300px;

auto 値は、包含ブロック（封じ込めの対象要素）が最後に計算されたサイズを持ち、そのコンテンツをスキップ（無視）している場合（例えば包含ブロックが画面外にあって、content-visibility: auto; が適用されている場合など）、その最後に計算されたサイズが適用されます。auto 値と <length> データ型の値がセットで指定された場合、要素が、auto の値を持っていればそのサイズを、持っていない場合は <length> で指定されたサイズを適用します。

封じ込めの指定については、contain プロパティの解説を参照してください。

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome