CSS Reference

contain-intrinsic-width

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

contain-intrinsic-width プロパティは、要素がサイズ封じ込めの対象となっている場合に、ブラウザがレイアウトに使用することができる包含ボックスの幅を指定します。

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

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

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

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

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

contain-intrinsic-widthの仕様

初期値
  • none
対象となる要素
  • サイズ封じ込め対象要素
継承
  • なし

主要ブラウザの対応

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

関連するプロパティ

仕様書

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

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

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

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

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome