CSS Reference

contain-intrinsic-size

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

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

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

最初に指定される1つ、もしくは auto と <length> データ型の値からなる1組の値が、contain-intrinsic-width プロパティの値として、次に指定される1つ、もしくは auto と <length> データ型の値からなる1組の値が、contain-intrinsic-height プロパティの値として使用されます。

値が1つ、もしくは auto と <length> データ型の値からなる1組だけ指定された場合は、contain-intrinsic-width、contain-intrinsic-height 両方のプロパティの値として使用されます。

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

contain-intrinsic-size: none; /* contain-intrinsic-width と contain-intrinsic-height 共に 'none' */
contain-intrinsic-size: 1000px; /* contain-intrinsic-width と contain-intrinsic-height 共に '1000px' */
contain-intrinsic-size: 10rem; /* contain-intrinsic-width と contain-intrinsic-height 共に '10rem' */
contain-intrinsic-size: auto 300px; /* contain-intrinsic-width と contain-intrinsic-height 共に 'auto 300px' */
contain-intrinsic-size: auto none; /* contain-intrinsic-width が 'auto'、contain-intrinsic-height が 'none' */
contain-intrinsic-size: auto 300px auto 4rem; /* contain-intrinsic-width が 'auto 300px'、contain-intrinsic-height が 'auto 4rem' */

主要ブラウザの対応

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