contain-intrinsic-width はCSS のプロパティで、要素がサイズ抑制の主体となっている場合に、ブラウザーがレイアウトに使用する要素の幅を設定します。

構文

/* キーワード値 */contain-intrinsic-width: none;/* <length> 値 */contain-intrinsic-width: 1000px;contain-intrinsic-width: 10rem;/* auto <length> */contain-intrinsic-width: auto 300px;/* グローバル値 */contain-intrinsic-width: inherit;contain-intrinsic-width: initial;contain-intrinsic-width: revert;contain-intrinsic-width: revert-layer;contain-intrinsic-width: unset;

値

以下の値が要素に指定できます。

none

この要素に内在的な幅はありません。

<length>

この要素には指定された幅 (<length>) があります。

auto <length>

その要素に「通常レンダリングされる」要素の幅の値が存在し、そのコンテンツをスキップする場合（例えば、その要素が画面外にある場合）の記憶値です。そうでなければ<length> が指定されます。

解説

このプロパティは、contain.size やcontent-visibility のような、サイズ抑制が発生する要素の横に並んだプロパティとして一般的に適用され、contain-intrinsic-size一括指定プロパティを使用して設定することもできます。

サイズ抑制により、ユーザーエージェントは要素が固定されたサイズであるかのようにレイアウトすることができ、実際のサイズを決定するための子要素の再描画を避けることで不必要な再フローを防ぐことができます（これにより、ユーザーの使い心地が向上します）。既定では、サイズ抑制は要素をコンテンツがないものとして扱い、コンテンツに幅または高さがない場合と同じ方法でレイアウトを崩す可能性があります。contain-intrinsic-width プロパティにより、レイアウトに使用する幅を指定することができます。

auto <length> 値は、要素が（子要素とともに）「通常レンダリング」される場合に要素の幅を格納し、要素がその内容をスキップするときに指定した幅の代わりに使用することができます。これにより、content-visibility: auto を持つ画面外の要素は、開発者が要素のサイズを正確に推定することなく、サイズ抑制の恩恵を受けることができます。子要素がレンダリングされる場合、記憶された値は使用されません（サイズ抑制が有効な場合、<length> が使用されます）。

公式定義

形式文法

contain-intrinsic-width =
[auto|from-element]?[none|<length [0,∞]>]

例

下記の例の他に、contain-intrinsic-size ページには、内在する幅と高さを変更する効果を示すライブサンプルがあります。

内在的な幅の設定

下記の HTML は、サイズ抑制を受け、子要素を格納する要素 "contained_element" を定義しています。

<div>  <div></div></div>

下記の CSS では、contained_element のcontent-visibility をauto に設定し、要素を非表示にするとサイズが制約されるようにしています。サイズ抑制されたときに使用する幅と高さは、それぞれcontain-intrinsic-width とcontain-intrinsic-height を使用して同時に設定します。

#contained_element {  border: 2px solid green;  width: 151px;  content-visibility: auto;  contain-intrinsic-width: 152px;  contain-intrinsic-height: 52px;}.child_element {  border: 1px solid red;  background: blue;  height: 50px;  width: 150px;}

仕様書

ブラウザーの互換性

関連情報

• content-visibility: the new CSS property that boosts your rendering performance (web.dev)
• contain-intrinsic-size
• contain-intrinsic-height
• contain-intrinsic-block-size
• contain-intrinsic-inline-size