CSS ボックスサイズ指定モジュール レベル 4

1. はじめに

これは CSS Sizing Level 3 に対する差分仕様です。 現在は探索的作業草案です: 何かを実装する場合は、Level 3 を参照してください。 CR に達した時点で、Level 3 のテキストをこの草案に統合します。

1.1. モジュール間の相互作用

このモジュールは、width、height、min-width、min-height、max-width、max-height、および column-width の機能を拡張します。これらは [CSS2] の第10章および [CSS3COL] で定義されています。

1.2. 値の定義

この仕様は、[CSS2] の CSS プロパティ定義規約に従い、 [CSS-VALUES-3] の 値定義構文を使用します。 この仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3] で定義されています。 他の CSS モジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。

各定義に列挙されているプロパティ固有の値に加えて、 この仕様で定義されているすべてのプロパティは、 プロパティ値として CSS 全体キーワードも受け入れます。 読みやすさのため、これらは明示的には繰り返していません。

2. 用語

CSS Sizing 3 § 2 用語

3. ボックスサイズの指定

CSS Sizing 3 § 3 ボックスサイズの 指定

3.1. サイズ指定プロパティ

CSS Sizing 3 § 3.1 サイズ指定 プロパティ

size プロパティは、一括指定プロパティであり、 width と height を1つの宣言で設定します。 2番目の値が省略された場合、 1番目の値がコピーされます。

size 一括指定は @page コンテキストでは使用できません。 @page には、ページサイズを設定するための無関係な size 記述子がすでに存在するためです。

size プロパティは、互換性問題や @page との競合を避けるため、 CSSOM の 推奨される 一括指定順序から除外する必要があります。

min-size プロパティは、一括指定プロパティであり、 min-width と min-height を1つの宣言で設定します。 2番目の値が省略された場合、 1番目の値がコピーされます。

max-size プロパティは、一括指定プロパティであり、 max-width と max-height を1つの宣言で設定します。 2番目の値が省略された場合、 1番目の値がコピーされます。

3.2. 新しいサイズ指定値: contain、fit-content()、および calc-size() 値

CSS Sizing 3 § 3.2 サイズ指定値: <length-percentage>、auto | none、min-content、max-content、および fit-content() 値

Level 4 では、 contain、fit-content()、および calc-size() 値を サイズ指定プロパティで使用できるようになり、 それによって <box-size> 生成規則を次のように拡張します:

<box-size> = <length-percentage> | stretch | contain | min-content | max-content | fit-content | fit-content() | calc-size()

fit-content(<length-percentage [0,∞]>)

fit-content の式を、 利用可能な空間を指定された引数に置き換えて使用します。 すなわち min(max-content, max(min-content, <length-percentage>)) です。ここで、<length-percentage> 引数は、 単独で現れる <length-percentage> 値の場合とまったく同じように解決されます。

負の <length-percentage> 値は無効です。

テスト

• auto-scrollbar-inside-stf-abspos.html (ライブ テスト) (ソース)
• block-fit-content-as-initial.html (ライブ テスト) (ソース)
• fit-content-length-percentage-001.html (ライブ テスト) (ソース)
• fit-content-length-percentage-002.html (ライブ テスト) (ソース)
• fit-content-length-percentage-003.html (ライブ テスト) (ソース)
• fit-content-length-percentage-004.html (ライブ テスト) (ソース)
• fit-content-length-percentage-005.html (ライブ テスト) (ソース)
• fit-content-length-percentage-006.html (ライブ テスト) (ソース)
• fit-content-length-percentage-007.html (ライブ テスト) (ソース)
• fit-content-length-percentage-008.html (ライブ テスト) (ソース)
• fit-content-length-percentage-009.html (ライブ テスト) (ソース)
• fit-content-length-percentage-010.html (ライブ テスト) (ソース)
• fit-content-length-percentage-011.html (ライブ テスト) (ソース)
• fit-content-length-percentage-012.html (ライブ テスト) (ソース)
• fit-content-length-percentage-013.html (ライブ テスト) (ソース)
• fit-content-length-percentage-014.html (ライブ テスト) (ソース)
• fit-content-length-percentage-015.html (ライブ テスト) (ソース)
• fit-content-length-percentage-016.html (ライブ テスト) (ソース)

contain

ボックスに 優先アスペクト比がある場合、 contain-fit サイズ指定を適用し、 可能な限りその 優先アスペクト比を維持しながら、 ボックスの制約内に収まるよう試みます。 § 6.1 Contain-fit サイズ指定: アスペクト比を維持しながら 引き伸ばすを参照してください。

ボックスに 優先アスペクト比がない場合、 stretch-fit サイズ指定を適用します。

calc-size()

CSS Values 5 § 10. 内在サイズを用いた計算: calc-size() 関数を参照してください。

注: none キーワードは、 calc-size() 内では使用できません。

注: これらの新しい値は、 <calc-size()> の定義が 「コンテキスト内で許可される」とする値の集合に追加されます。

4. アスペクト比

画像には多くの場合、自然アスペクト比があり、 CSS レイアウトアルゴリズムは要素のサイズを変更する際に それを維持しようとします。

aspect-ratio プロパティを使用すると、 非置換要素に対してこの動作を指定し、 置換要素の実効アスペクト比を変更できます。

この節の詳細については まだ作業中です。 ここで指定されている動作のいずれかによって、 置換要素で 優先アスペクト比を持つものが、 この仕様が適用されていない状態で CSS2、 Flex Layout、 および Grid Layout の仕様を組み合わせた要件の下での動作と異なる動作をする場合、 それはエラーであり、CSSWG に報告する必要があります。 未解決の aspect-ratio イシューの一覧があります。

4.1. 優先アスペクト比: aspect-ratio プロパティ

このプロパティは、ボックスに 優先アスペクト比を設定します。 これは auto サイズ およびその他の一部のレイアウト関数の計算で使用されます。

auto

置換要素に 自然アスペクト比がある場合、 そのアスペクト比を使用します。 それ以外の場合、ボックスには 優先アスペクト比がありません。 アスペクト比を含むサイズ計算では、 常に コンテンツボックスの寸法を使用します。

<ratio>

ボックスの 優先アスペクト比は、指定された width / height の比率です。 アスペクト比を含むサイズ計算では、 box-sizing で指定されたボックスの寸法を使用します。

<ratio> が 退化している場合、 このプロパティは代わりに auto として動作します。

auto && <ratio>

auto と <ratio> の両方が一緒に指定された場合、 優先アスペクト比は、指定された width / height の比率になります。 ただし、置換要素で 自然アスペクト比がある場合は、 代わりにそのアスペクト比を使用します。 いずれの場合も、アスペクト比を含むサイズ計算では、 常に コンテンツボックスの寸法を使用します。

<ratio> が 退化している場合、 このプロパティは代わりに auto として動作します。

テスト

• block-aspect-ratio-050.html (ライブ テスト) (ソース)

注: 優先アスペクト比を持つことによって、 ボックスが 置換要素になるわけではありません。 置換要素固有のレイアウト規則は一般に、 優先アスペクト比を持つ 非置換ボックスには適用されません。 たとえば、非置換の 絶対配置されたボックスでは、 justify-self: normal を start ではなく stretch として扱います （CSS Box Alignment 3 § 6.1.2 絶対配置ボックス）。 これは 優先アスペクト比を持っている場合でも同様です。

CSS2.1 は、 置換要素とアスペクト比を持つ要素を 明確に区別していません。 不明確な具体的ケースを特定し、それらを 適切な Level 3 仕様またはここで定義する必要があります。

<ul>
  <li>…
  <li>…
  <li>…
  <li>…
</ul>

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
li {
  aspect-ratio: 1/1;
  overflow: auto;
}

<iframe
  src="https://www.youtube.com/embed/0Gr1XSyxZy0"
  width=560
  height=315>

@supports (aspect-ratio: attr(width number) / 1) {
  iframe {
    aspect-ratio: attr(width number) / attr(height number);
    width: 100%;
    height: auto;
  }
}

置換要素の唯一の 自然 寸法が、 自然幅または 自然 高さである場合、 その要素に 優先アスペクト比を与えると、 既存のサイズを 優先アスペクト比を介して転送することで、 欠けていた方の 自然高さまたは幅も 与えられます。

4.2. 自動サイズに対する優先アスペクト比の影響

ボックスに 優先アスペクト比がある場合、 その 自動サイズは、 置換要素で 自然アスペクト比を持ち、 その軸に 自然サイズを持たない場合と同じように計算されます。 たとえば CSS2 § 10 および CSS Flexible Box Model Level 1 § 9.2 を参照してください。 優先サイズの計算が このアスペクト比に依存する軸を 比率依存軸と呼びます。 その結果のサイズは、入力サイズも 確定している場合、 確定します。 反対側の軸（比率依存軸のサイズが依存する軸）を、 比率決定軸と呼びます。

注: 優先アスペクト比は、 ボックスのサイズの少なくとも一方が 自動である場合にのみ効果を持ちます。 width と height のどちらも 自動サイズでない場合、 優先 サイズには影響しません。

すべての サイズ指定情報をここへ移動し、 2.1 に無理に押し込むのをやめれば、 ここでの基本原則は単純に次のようになります: 比率決定軸で解決された 優先サイズが （最小/最大を適用する前に） 比率を介して転送されます。 最小/最大制約はその後転送され、 それからアスペクト比に関係なく各軸へ独立して適用されます。

4.2.1. マージンの相殺

マージン相殺（CSS 2 § 8.3.1 マージンの 相殺）の目的では、 ブロック軸が 比率依存軸である場合、 算出された block-size が auto であるとは見なされません。

4.3. コンテンツに基づく自動最小サイズ

意図しないオーバーフローを回避するため、 自動最小サイズは、比率依存軸において、 優先アスペクト比を持ち、 置換要素でも、 その軸の スクロールコンテナーでもないボックスでは、 その min-content サイズを 最大サイズで上限とした値になります。

div {
  aspect-ratio: 1/1;
  /* 'width' と 'height' はどちらも既定で 'auto' */
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  | ~~~~~~~~ |
                            | ~~~~~~   |
                            +----------+

div {
  overflow: auto;
  aspect-ratio: 1/1;
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~^|
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~v|
+----------+  +----------+  +----------+

div {
  aspect-ratio: 1/1;
  min-height: 0;
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  +-~~~~~~~~-+
                              ~~~~~~    

<div style="height: 100px; aspect-ratio: 1/1;">
  <span style="display: inline-block; width: 50px;"></span>
  <span style="display: inline-block; width: 150px;"></span>
</div>

4.4. 最小/最大サイズの転送

どちらかの軸 （origin 軸）におけるサイズ指定制約は、 優先アスペクト比を介して転送され、 もう一方の軸（destination 軸）にある 不定の 最小、最大、または 優先サイズに 次のように適用されます:

• まず、確定した 最小サイズは、 origin 軸から destination 軸へ 変換されて転送されます。 この転送された最小値は、 destination 軸にある 確定した 優先または 最大サイズを 上限とします。

• 次に、確定した 最大サイズは、 origin から destination へ 変換されて転送されます。 この転送された最大値は、 destination 軸にある 確定した 優先または 最小サイズ、 および存在する場合は転送された最小値を 下限とします。

注: したがって、確定サイズは転送された制約によって まったく影響を受けません。 また、転送された最小値によって要素が確定した優先/最大サイズを超えることはなく、 転送された最大値によって要素がその優先/最小サイズに違反することもありません。

注: 基本原則は、サイズ指定制約が アスペクト比を介して反対側へ転送され、 影響を受ける軸に明示的に指定されたサイズに違反しない範囲で 可能な限りアスペクト比を維持することです。 （これは CSS2 第10.4節の 制約表の内容を決定した原則です。）

<div id=container style="height: 100px; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">コンテンツ</div>
</div>

<div id=container style="height: auto; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">コンテンツ</div>
</div>

この節は正しく 記述されていない可能性があります。[Issue #6071]

5. 内在サイズの決定

5.1. 内在サイズ

CSS Sizing 3 § 5.1 内在 サイズ

5.2. 包含された内在サイズの上書き: contain-intrinsic-* プロパティ

これらのプロパティにより、サイズ 包含を持つ要素は、 明示的な 内在内部サイズを指定でき、 ボックスは、その 通常フロー内のコンテンツが 指定された 明示的な内在内部サイズと一致する幅と高さを 合計として持つかのようにサイズ指定されます （空であるかのようにサイズ指定されるのではありません）。

注: これは必ずしも、 要素に指定された 明示的な内在 内部サイズを持つ子が1つあるかのようにレイアウトすることと同等ではありません。 たとえば、指定サイズの子を1つ持つ グリッドコンテナーは、 依然として指定されたグリッドに従ってサイズ指定され、 通常は指定値より大きなコンテンツサイズになります。

none | <length>

他の contain-intrinsic-size 値 （auto など）が 明示的な内在内部サイズを提供していない場合、 対応する軸には 明示的な内在内部サイズが存在しない （none が指定された場合）か、 指定された <length> の 明示的な内在内部サイズを 持ちます。

auto

auto が指定され、 要素が 最後に記憶されたサイズを持ち、 現在 そのコンテンツをスキップしている場合、 対応する軸における 明示的な内在内部サイズは、 その軸における 最後に記憶されたサイズになります。

注: これは、たとえば content-visibility: auto の要素が 画面外にある場合に発生します。

テスト

• content-visibility-058.html (ライブ テスト) (ソース)

要素がある軸に 明示的な内在内部サイズを持つ場合、 サイズ 包含に対して通常どおり要素をレイアウトした後、 その軸のコンテンツサイズは、レイアウトで計算された値ではなく 明示的な内在内部サイズとして扱われ、 必要に応じてレイアウトが再度実行されます。 （両方の軸に 明示的な内在内部サイズがある場合、 最初のレイアウトを省略できることを意味します。）

これら4つのプロパティは、論理プロパティグループの一部です。

注: サイズ 包含を持つ要素は、コンテンツがないかのようにレイアウトされます [CSS-CONTAIN-1]。 そのため、多くの場合、要素の内部高さがゼロまで縮小します。 これは、予想されるコンテンツを表示するように選んだ明示的な height で 修正できますが、 Flex や Grid Layout など一部のレイアウトシステムでは、 明示的な height を、 暗黙のコンテンツベースの高さよりも強い指示として扱うため、 意図しない影響が生じる可能性があります。 したがって、その要素は、その高さまで単にコンテンツで満たされていた場合とは 大きく異なるレイアウトになる可能性があります。 要素に 明示的な内在内部サイズを与えることで、 レイアウト時にコンテンツを無視することによる性能上の利点を維持しながら、 コンテンツが存在するかのようにサイズ指定できます。

contain-intrinsic-size は、 contain-intrinsic-width および contain-intrinsic-height プロパティを設定する一括指定プロパティです。

1番目の値は contain-intrinsic-width 値を表し、 2番目は contain-intrinsic-height 値を表します。 値が1つだけ指定された場合、 その値は両方のプロパティに適用されます。

5.2.1. 最後に記憶されたサイズ

サイズ包含は、ページを効率的にレンダリングできるようにするうえで非常に有用であり、 要素のレンダリング変更の結果として発生し得る レイアウト処理の範囲を制限します。 しかし、作者にとっては非常に制約が強く、 要素のサイズがどうなるかを正しく予測する必要があります。 この予測が少しでも誤っていると、 見苦しいスクロールバーや、意図せず隠されたコンテンツが生じる可能性があります。

contain-intrinsic-size の auto キーワードは中間的な選択肢を提供します: 要素が一度でも 非サイズ包含状態になった場合、 この値によって要素はそのサイズ （通常どおりレイアウトによって計算されたもの）を記憶します。 その後、要素が サイズ包含を得た場合、 記憶されたサイズを使用し、 サイズ包含の性能上の利点を提供しつつ、 コンテンツに対しておそらく正確にサイズ指定されます。

ResizeObserver の対象になれる要素のみが、最後に 記憶されたサイズを持つことができます。

5.2.2. overflow: auto との相互作用

contain-intrinsic-size プロパティは、 作者が要素のコンテンツをどの程度の大きさと想定しているかの推定値を提供しますが、 この推定値は実際のコンテンツではなく、 ユーザーに表示する必要があるものを表すわけでもありません。 したがって、overflow: auto を持つ要素は、 contain-intrinsic-size の結果として スクロールバーを生成してはなりません。

しかし、contain-intrinsic-size が、 そのサイズの実際のコンテンツを含んでいれば要素がスクロールバーを生成するほど 十分に大きなサイズを示している場合、 その要素はそのような仮想的なコンテンツに従って スクロールバーを生成したかのようにサイズ指定されなければなりません。

div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  overflow: auto;
}

div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  height: 50px;
  overflow: auto;
}

5.3. レスポンシブにサイズ指定される iframe: frame-sizing プロパティ

HTML の iframe など、一部の 置換要素は「通常の」フローコンテンツを含むことができます。 プライバシーおよびセキュリティ上の理由から、 これらの要素は既定では、 内部コンテンツのサイズ指定に関する情報を 外側のページへ公開せず、 代わりに静的で事前決定された内在サイズを使用し、 コンテンツをスクロール可能にします。 frame-sizing プロパティを使用すると、 これらの要素は実際のコンテンツサイズの公開をオプトインできます。 このサイズを 内部レイアウト内在サイズと呼びます。 値の意味は次のとおりです:

auto

要素の 内部レイアウト内在サイズが存在する場合でも、 無視されます。

content-width

content-height

content-block-size

content-inline-size

要素に 内部レイアウト内在サイズがある場合、 その 内在サイズは、 内部レイアウト内在サイズから 対応する寸法 （幅または高さ）を取得します。 （もう一方の寸法は通常どおり決定されます。）

論理方向は、要素の 書字 モードに基づいて解決されます。 （埋め込み文書のものではありません。）

どの要素が 内部レイアウト内在サイズを持つことができるか、 またそれをどのように決定するかは、 文書言語によって決定されます。 HTML では、 iframe 要素のみが 内部レイアウト内在 サイズを持つことができ、 さらに、 含まれる文書も <meta name=responsive-embedded-sizing> 要素を介してオプトインしている場合に限られます。 （§ 5.3.1 HTML iframe の詳細を参照。）

<meta name="responsive-embedded-sizing">
<div style="height: 500px"></div>

iframe {
  frame-sizing: content-height;
}

さらに、 内部文書は window.requestResize() を呼び出して、その 内部レイアウト内在サイズを後で更新できます。

5.3.1. HTML iframe の詳細

HTML では、 iframe 要素だけが内部レイアウト内在サイズを持つことができ、 さらに、 iframe の 埋め込み文書が適切にオプトインしている場合に限られます。

HTML Document オブジェクトには、 レスポンシブ埋め込みサイズ指定フラグが関連付けられており、 初期状態では未設定です。 これは文書の初期解析中に、 次のいずれかが最初に発生したかに応じて、 true または false に設定されます:

• <meta name=responsive-embedded-sizing> 要素に遭遇した場合、 true に設定されます。

• body 要素が（明示的または暗黙的に）開かれた場合、 またはパーサーによって文書に挿入された場合、 false に設定されます。

true または false のいずれかに設定されると、 このフラグは Document の存続期間中、再び値が変更されることはありません。

注: 現在、HTML 文書の meta 要素が head 内に現れることが、 HTML において埋め込み文書がこの機能にオプトインする唯一の方法です。 これは、 iframe 内の SVG 文書はオプトインできないことを意味します。

注: HTML パーサーの特性により、 meta 要素は技術的には head 要素と body 要素の間に現れることができ、 head 内へ再親子付けされます。 この場所も <meta name=responsive-embedded-sizing> 要素にとって有効です。 なぜなら、 body はまだ開かれていないためです。 ほとんどの HTML 要素は、 body 開始タグが存在しない場合でも、 body 要素を暗黙的に開くことに注意してください。 また、文書にそのような要素がまったく存在しない場合、 空の要素が自動的に生成されて挿入されます。

内部レイアウト内在サイズは最初に、 埋め込み文書が DOMContentLoaded イベントを発火した後の最初のレイアウト結果によって設定され、 さらに load イベントが Window で発火したときにも設定されます。 その後の埋め込み文書のコンテンツ、スタイル、またはレイアウトの変更は、 内部レイアウト内在 サイズに自動的には影響しませんが、 requestResize() も参照してください。

埋め込み文書はさらに、ロックされた埋め込み ICB サイズを持つことができ、 初期値は null です。 文書のレスポンシブ埋め込みサイズ指定フラグが レイアウト実行時に true であり、 かつロックされた埋め込み ICB サイズが null の場合、 現在の初期包含ブロックのサイズを、ロックされた埋め込み ICB サイズとして記録します。 以降のレイアウトでは、 初期包含ブロックのサイズを通常どおり計算する代わりに、 ロックされた埋め込み ICB サイズを使用します。

注: この ICB の固定により、 レイアウトループが発生する可能性が低減されます （iframe 文書がその ICB よりわずかに大きくサイズ指定され、 それに合わせて親 iframe のサイズが変更され、 次のレイアウトで再び ICB よりわずかに大きくなり、 これが無限に続く、といった状況です）。

iframe にロックされた埋め込み ICB サイズを強制的に忘れさせる方法を 用意する必要があるでしょうか？ frame-sizing を一度オフにして再びオンにする方法でしょうか？

iframe の文書をナビゲートすると、 ロックされた埋め込み ICB サイズを忘れます。 新しい文書のレスポンシブ埋め込みサイズ指定フラグが未設定である限り、 内部レイアウト内在サイズを忘れることはありません。 フラグが（true または false に）設定されると、 内部レイアウト内在サイズは忘れられます。 フラグが true に設定された場合、 その後、両方が通常どおり新たに計算されます。

5.3.2. Window インターフェイスの拡張

partial interface Window {
  undefined requestResize();
};

5.4. 内在サイズへの寄与

CSS Sizing 3 § 5.2 内在サイズへの寄与

5.5. Min-Content サイズへの寄与をゼロにする: min-intrinsic-sizing プロパティ

このプロパティの名前は本格的に Bikeshed で検討する必要があります。

このプロパティは、非置換ボックスのmin-content への寄与を、 特定の状況で「圧縮」するかどうかを定義します。 各値の意味は次のとおりです:

legacy

ボックスのmin-content への寄与は、 通常どおり処理されます。

zero-if-scroll

ボックスのmin-content への寄与は、 その軸でスクロール コンテナーである場合に「圧縮」されます。

zero-if-extrinsic

ボックスのmin-content への寄与は、 外在的な 優先サイズまたは最大サイズを持つ場合に 「圧縮」されます。

注: これは、ほとんどの置換要素の既定の動作です。

*, ::before, ::after { min-intrinsic-sizing: zero-if-scroll; }

注: zero-if-scroll の動作を既定にした方が より適切でしたが、 Web 互換性のため、初期値にはできません。:(

「圧縮された」min-content への寄与は、 ボックスが空であると仮定して計算されます。 ただし、サイズ指定プロパティの明示的な min-content、max-content、および fit-content 値によって課される サイズ指定制約を考慮する場合を除きます。

5.6. 新しい列サイズ指定値: stretch、min-content、max-content、fit-content、および fit-content() 値

column-width の値として使用された場合、 新しいキーワードは最適な列幅を指定します:

stretch

最適な列幅を、マルチカラムコンテナーのstretch-fit インラインサイズとして指定します。

min-content

最適な列幅を、マルチカラムコンテナーのコンテンツのmin-content インラインサイズとして指定します。

max-content

最適な列幅を、マルチカラムコンテナーのコンテンツのmax-content インラインサイズとして指定します。

fit-content

最適な列幅を min(max-content インラインサイズ, max(min-content インラインサイズ, stretch-fit インラインサイズ)) として指定します。

fit-content(<length-percentage>)

最適な列幅を min(max-content サイズ, max(min-content サイズ, <length-percentage>)) として指定します。

注: 列幅が列ごとに異なることはありません。 列幅がマルチカラムコンテナーのコンテンツから決定される場合 （上記のキーワードの場合）、 そのすべてのコンテンツが考慮され、 計算された幅がすべての列で共有されます。

6. 外在サイズの決定

CSS Sizing 3 § 4 外在サイズの 決定

6.1. Contain-fit サイズ指定: アスペクト比を維持しながら引き伸ばす

Contain-fit サイズ指定は基本的に stretch-fit サイズ指定を適用しますが、 ボックスの優先アスペクト比を維持するために、 一方の軸でボックスのサイズを縮小します。 これは、object-fit および background-size プロパティの contain キーワードに似ています。

まず、対象矩形を決定します:

1. 初期対象矩形はボックスの包含ブロックのサイズであり、 不定なサイズは無限大であると仮定します。 両方の寸法が不定の場合、 初期対象矩形は、 ボックスがstretch-fit サイズ指定された場合の 外縁に一致するよう設定されます。
2. 次に、ボックスが none 以外の max-width または max-height を持つ場合、 対象矩形は影響を受ける寸法において、 ボックスのマージンボックスの「最大サイズ」以下になるよう制限されます。 つまり、ボックスが max-width/height でサイズ指定された場合の マージンボックスのサイズです。 （通常の box-sizing 規則と整合して、 この「最大サイズ」はボックスの min-width/min-height の効果によって下限が設定されることに注意してください。）
3. 最後に、対象矩形がボックスの優先アスペクト比に一致するために 必要な最小限だけ、一方の寸法を縮小します。

各寸法における contain-fit サイズは、 対象矩形へ stretch-fit した場合に得られるサイズです。

マージンの相殺に関して stretch-fit が最終的に行うことをそのまま適用する。

一方の寸法に最小サイズがあり、 アスペクト比を尊重すると対象矩形からオーバーフローする場合、 アスペクト比を尊重するのでしょうか、それとも画像を歪ませるのでしょうか？ 前者の場合、関連する最小値を適用する #2 と同様の手順が必要です。

6.2. パーセントによるサイズ指定

…

変更点

2021年5月5日付作業草案以降の変更点

2021年5月5日付 作業草案以降の重要な変更点は次のとおりです:

• size、min-size、および max-size 一括指定プロパティを追加しました。 （イシュー 820）

• calc-size() をサイズ指定 プロパティに追加しました。 （イシュー 6265）

• frame-sizing プロパティの定義を追加しました。 （1771）

• fit-content() を Level 3 から取り込み、fit-content と stretch を Level 3 に戻しました。 （イシュー 10601）

• サイズ指定値を統合するため、<box-size> 文法生成規則を導入しました。 （イシュー 13478）

• contain-intrinsic-size における値の並べ替えを禁止しました。 （イシュー 6391）。

• 幽霊サイズを避けるため、 要素がそのコンテンツをスキップしている場合にのみ、contain-intrinsic-* プロパティの auto 値に最後に記憶されたサイズを使用するようにしました。 （イシュー 6308）。

• どの要素がいつ最後に記憶されたサイズを取得するかを明確化しました。 （イシュー 6220）

• contain-intrinsic-size プロパティの 論理プロパティグループを追加しました。 （イシュー 2822）。

• より柔軟な値の組み合わせを許可するため、contain-intrinsic-size の構文を変更しました。 （イシュー 8407）。

• contain-intrinsic-* プロパティで負の長さを禁止しました。 （イシュー 11945）。

• 'contain-intrinsic-size/from-element' 値を介してレスポンシブにサイズ指定される iframeを追加しました。 （イシュー 1771）。

• Flexbox のstretch-fit サイズ指定の動作が stretch とはわずかに異なることを明確化しました。 （イシュー 11784）。

• Web Platform Tests のカバレッジを追加しました。

• その他、さまざまな軽微な編集上の修正と改善を行いました。

2020年10月20日付作業草案以降の変更点

2020年10月20日付 作業草案以降の重要な変更点は次のとおりです:

• スクロールコンテナーの min-content への寄与をより適切に制御するため、 min-intrinsic-sizing プロパティを草案化しました。 （イシュー 1865、 イシュー 4585）

• 各軸を独立して制御するため、 contain-intrinsic-size にロングハンドを追加しました。 （イシュー 5432）

• 以前に計算されたサイズを「記憶」できるようにするため、 contain-intrinsic-size に auto 値を草案化しました。 （イシュー 5668、 イシュー 5815）

• aspect-ratio における 退化比率の処理を定義しました。 （イシュー 5557）

• aspect-ratio が置換要素の自然サイズに どのように影響するかを定義しました。 （イシュー 5306）

• § 4.4 最小/最大サイズの転送 節のいくつかの誤りを修正し、 CSS2 / CSS Flex Layout / などで定義された動作と競合しないよう調整しました。 （イシュー 6071）

• contain-intrinsic-size: auto none 構文を追加しました。

2020年5月26日付 最初の公開作業草案以降の重要な変更点は次のとおりです:

• 比率決定軸を用語として定義しました。

• 最小/最大サイズ指定制約が aspect-ratio を介して転送されることを定義しました。 （イシュー 5257）

  さらに、いずれかの軸 （origin 軸）のサイズ指定制約は、 優先アスペクト比を介して もう一方の軸（destination 軸）へ 次のように転送されます:

  • まず、確定した最小 サイズは変換され、 origin 軸から destination 軸へ転送されます。 この転送された最小値は、 destination 軸にある任意の確定した 優先サイズまたは最大 サイズによって上限が設定されます。

  • 次に、任意の確定した最大 サイズが変換され、 origin 軸から destination 軸へ転送されます。 この転送された最大値は、 destination 軸にある任意の確定した 優先サイズまたは最小 サイズ、 および転送された最小値がある場合はそれによって下限が設定されます。

  注: 基本原則は、 サイズ指定制約が aspect-ratio を介してもう一方の側へ転送され、 影響を受ける軸に明示的に指定されたサイズに違反しない範囲で、 可能な限りアスペクト比を維持することです。

• 自然サイズが 1 つだけの置換要素に対する aspect-ratio が、もう一方の寸法を決定することを明確化しました。 （イシュー 5306）

  置換要素の唯一の自然寸法が 自然幅または自然高である場合、 それに優先アスペクト比を与えると、 欠けていた方に応じて自然高または自然幅も与えられます。 これは既存のサイズを 優先アスペクト比を介して転送することで行われます。

• aspect-ratio がマージンの自己相殺を抑制することを定義しました。 （イシュー 5328）

  マージンの相殺（CSS 2 § 8.3.1 マージンの相殺）において、 ブロック軸が比率依存軸である場合、 算出された block-size が auto であるとは見なされません。

レベル 3 以降の追加事項

• サイズ指定プロパティに fit-content() 関数および contain キーワードを追加しました。
• aspect-ratio プロパティを追加しました。
• contain-intrinsic-width、contain-intrinsic-height、contain-intrinsic-block-size、および contain-intrinsic-inline-size プロパティと、 それらの一括指定である contain-intrinsic-size を追加しました。
• min-intrinsic-sizing プロパティを追加しました。
• frame-sizing プロパティを追加しました。

謝辞

このモジュールへの貢献について、Aaron Gustafson、L. David Baron に特別な感謝を申し上げます。

プライバシーに関する考慮事項

この仕様は、新たなプライバシー上の考慮事項を導入しません。

セキュリティに関する考慮事項

この仕様は、新たなセキュリティ上の考慮事項を導入しません。