CSSボックスサイズ モジュール レベル 3

1. はじめに

このセクションは規定的ではありません。

CSSのレイアウトには、様々なレイアウト計算で使用される自動サイズ指定の異なる概念がいくつかあります。 このセクションでは、この仕様のレイアウト動作を他のモジュールで使われる計算と結びつけるための、より厳密な用語の定義と、 width および height プロパティのための新しいキーワードをいくつか紹介します。 これにより、著者はこれらのサイズ計算の結果となる寸法を要素に割り当てることができます。

この仕様には図解が必要です！issue を参照してください。

1.1. モジュール間の関係

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

このモジュールで定義される box-sizing プロパティの定義は、[CSS-UI-3] の定義に優先します。

1.2. 値の定義

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

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

2. 用語集

座標軸や寸法に関する主要な用語はCSS Writing Modes 3 § 6 抽象ボックス用語で定義されています。

サイズ

1 次元または 2 次元の寸法： ブロックサイズおよび／またはインライン サイズ； あるいは、幅および／または高さ。

内部サイズ

ボックスのコンテンツボックスのサイズ。

外部サイズ

ボックスのマージンボックスのサイズ。

確定サイズ

レイアウトを実行せずに決定できるサイズ； すなわち、<length>、 テキストの寸法（行の折り返しを考慮しない）、 初期包含ブロックのサイズ、 または<percentage>もしくはその他の式 （非置換ブロックの「stretch-fit」 サイジング [CSS2]など）であり、 確定サイズのみを基準として解決されるもの。

さらに、絶対配置要素の包含ブロックのサイズは、その要素に関して常に 確定している。

不確定サイズ

確定していないサイズ。不確定な利用可能空間は、本質的に 無限である。

利用可能 空間

ボックスがレイアウトされる空間を表すサイズであり、 そのボックスが関与する整形コンテキストの 規則によって決定される。 ボックスに利用可能な空間は通常、 その包含ブロックの寸法（それが確定している場合） または無限のサイズ（それが不確定である場合）のいずれかである。利用可能空間は、代わりに最小コンテンツ制約または 最大コンテンツ 制約のいずれかとすることもでき、 その中に配置されるボックスを、その制約下でレイアウトするよう強制する。

ストレッチフィット

所与のサイズに対するストレッチフィットとは、 そのサイズから、 所与の次元におけるボックスの算出済みマージン（相殺せず、autoをゼロとして扱う）、 ボーダー、およびパディングを差し引き （外部サイズが完全に収まるようにし）、 ゼロを下限としたもの （内部サイズが負にならないようにしたもの）である。

注：これは、CSS2.1§10.3.3における通常フロー内の非置換ブロックのauto幅を 計算するために使用される式である。

フォールバックサイズ

一部のサイジングアルゴリズムは、無限のサイズでは適切に機能しない。 そのような場合は、代わりにフォールバックサイズが 使用される。 特に指定がない限り、 これは初期包含ブロックのサイズである。

2.1. 自動ボックスサイズ

CSSには、文脈に応じてautoのサイズ指定規則から導出される、4種類の自動的に決定されるサイズがあります：

ストレッチフィットサイズ

ストレッチフィットインラインサイズ

ストレッチフィットブロックサイズ

ボックスの外側サイズが指定した軸の利用可能な空間を満たす場合のサイズ。 つまり、利用可能な空間が確定している場合、その空間へのストレッチフィット。 利用可能な空間が不確定の場合は未定義。

注: インライン軸の場合、これはCSS2.1§10.3.5で「利用可能幅」と呼ばれ、CSS2.1§10.3.3の規則で計算されます。

注: このサイズを使う計算では、利用可能な空間が不確定の場合のフォールバック動作を指定する必要があります。

max-contentサイズ

無限の利用可能な空間が与えられた時、ボックスがその軸で取る「理想的な」サイズ。 通常、その軸でボックスがコンテンツにぴったり収まる最小のサイズであり、 空きスペースを最小化し、オーバーフローを避ける形。

max-contentインラインサイズ

ボックスがインライン軸で取る「理想的な」サイズ。 通常、ボックス内のソフトラップ機会が一つも取られない場合に、コンテンツに収まる最も狭いインラインサイズ。 （§ 5 内在的サイズ決定参照。）

注: これはCSS2.1§10.3.5では「推奨幅」、CSS2.1§17.5.2.2では「最大セル幅」と呼ばれます。

max-contentブロックサイズ

ボックスがブロック軸で取る「理想的な」サイズ。 通常、レイアウト後のコンテンツのブロックサイズ。

min-contentサイズ

名目上、ボックスが取れる最小のサイズで、より大きなサイズを選ぶことで回避できるオーバーフローが発生しないもの。 厳密には、ボックスがmin-content制約下でサイズ指定された場合のサイズ。 § 5 内在的サイズ決定参照。

min-contentインラインサイズ

min-contentサイズのインライン軸での値。 通常、ボックス内のソフトラップ機会が全て取られた場合にコンテンツに収まるインラインサイズ。

注: これはCSS2.1§10.3.5では「推奨最小幅」、CSS2.1§17.5.2.2では「最小コンテンツ幅」と呼ばれます。

min-contentブロックサイズ

min-contentサイズのブロック軸での値。 ブロックコンテナ、テーブル、インラインボックスの場合、 これはmax-contentブロックサイズと同等です。

fit-contentサイズ

fit-contentインラインサイズ

fit-contentブロックサイズ

指定した軸の利用可能な空間が確定している場合、 次の値と等しい： clamp(min-contentサイズ, ストレッチフィットサイズ, max-contentサイズ) （すなわち max(min-contentサイズ, min(max-contentサイズ, ストレッチフィットサイズ))）。 min-content制約下では min-contentサイズと同じ。 それ以外の場合は、その軸のmax-contentサイズと同じ。

注: これはCSS2.1§10.3.5やCSS Multi-column Layout § 3.4で「縮小フィット幅」と呼ばれます。

内在的サイズ

max-contentサイズまたはmin-contentサイズ、 すなわち主にコンテンツのサイズから生じるサイズ。 （この用語の一部は、これら2つのサイズのどちらか主に由来するサイズを指す場合もあります。）

置換要素は、その内在的サイズを自然寸法から導くことが多いです。

2.2. 内在的サイズの寄与

max-content寄与

ボックスが自身の包含ブロックのmax-contentサイズに寄与するサイズ。

min-content寄与

ボックスが自身の包含ブロックのmin-contentサイズに寄与するサイズ。

内在的サイズ寄与

max-content寄与、min-content寄与、または同様に計算されるコンテンツベースのサイズ寄与。

内在的サイズの寄与はボックスの外側サイズに基づきます。 この目的ではautoマージンはゼロとして扱います。

2.3. 内在的サイズ制約

max-content制約

ボックスの包含ブロックによって課され、ボックスがmax-content寄与を生成するようにするサイズ制約。

min-content制約

ボックスの包含ブロックによって課され、ボックスがmin-content寄与を生成するようにするサイズ制約。

推奨アスペクト比

ボックス固有のwidth:height比率で、各種サイズ指定アルゴリズムが可能な限り他のサイズ指定と矛盾しない範囲でこの比率を保とうとします。 特に指定がない限り、ボックスの推奨アスペクト比は、もしあれば自然アスペクト比であり、content boxに適用されます。 ほとんどのボックスは推奨アスペクト比を持ちません。

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

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

このセクションでは、サイズ指定プロパティであるwidth、height、min-width、min-height、max-width、および max-heightを定義します。 それらの値の候補は次のセクション§ 3.2 サイズ値: <length-percentage>, auto | none, min-content, max-content, fit-content()値で定義されています。

注: これらのプロパティには追加のフロー相対のエイリアスが[CSS-LOGICAL-1]で定義されています。

サイズ指定プロパティの各ペア（例：widthとheight）の略記法を定義したいですが、@pageのsize記述子（[CSS-PAGE-3]）との命名衝突があるため、Level 4に延期されています。 この問題の解決方法についての提案を歓迎します。議論参照。

3.1.1. 推奨サイズ指定プロパティ：widthおよびheightプロパティ

widthとheight（物理）プロパティは、 ボックスの推奨 widthおよびheightをそれぞれ指定します。

3.1.2. 最小サイズ指定プロパティ：min-widthおよびmin-height プロパティ

min-widthおよびmin-heightプロパティは、 ボックスの最小幅（または“min width”）、 最小高さ（または“min height”）をそれぞれ指定します。

注: autoの初期値は新しく追加されたものです。 [CSS2]では初期値はゼロでした。

3.1.3. 最大サイズ指定プロパティ：max-widthおよびmax-height プロパティ

max-widthおよびmax-heightプロパティは、 ボックスの最大幅（または“max width”）、 最大高さ（または“max height”）をそれぞれ指定します。

3.2. サイズ値：<length-percentage>、auto | none、min-content、max-content、fit-content()値

<length-percentage>

<length> および／または<percentage>を使用して、ボックスのサイズを指定する。 box-sizingプロパティは、コンテンツボックスまたはボーダーボックスのどちらが 測定されるかを示す。

パーセンテージは、必要に応じて、ボックスの包含ブロックの幅／高さを基準として 解決される。 特定の軸において、 包含ブロックのサイズがボックスのサイズに依存する場合、 パーセンテージの解決方法に関する特別な規則については、 関連するレイアウトモジュールを参照。

負の値は無効である。

auto

width/heightについては、自動 サイズ（自動ブロックサイズ/自動インライン サイズ）を指定する。 その計算方法については、関連するレイアウトモジュールを参照。

min-width/min-heightについては、 自動最小サイズを指定する。 ただし、関連するレイアウトモジュールによって別途定義されていない限り、 その使用値は 0に解決される。 後方互換性のため、 このキーワードの解決値は、すべての[CSS2]の表示 型のボックスに対してゼロとなる： ブロックボックスとインラインボックス、 インラインブロック、 およびすべてのテーブルレイアウトボックス。 ボックスが生成されない場合も、 ゼロに解決される。

none

ボックスのサイズに制限を設けない。

min-content

関連する軸における最小コンテンツサイズを 使用する； ボックスのブロックサイズについては、 特に指定がない限り、 これはその自動サイズと同等である。

max-content

関連する軸における最大コンテンツサイズを 使用する； ボックスのブロックサイズについては、 特に指定がない限り、 これはその自動サイズと同等である。

fit-content(<length-percentage>)

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

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

いずれの場合も、使用値は非負の内側サイズを保つようにゼロで切り捨てられます。

注: min-content、max-content、fit-content()値はLevel 3で新しく追加されたものです。

注: flex-basisプロパティにもこれらの新しいキーワードが追加されます。 その値は<width>参照で定義されます。

注：この節では以前、stretchおよびfit-contentを、それぞれストレッチフィットサイズおよびフィットコンテンツサイズを表すキーワードとして定義していた。 これらのキーワードは、レベル 4 へ延期された （stretchと同様に振る舞うが、存在する場合は 優先アスペクト 比を維持する、追加のcontainキーワードとともに）。 これは、利用可能空間が不確定である状況における影響を、 より適切に検討するためである。

3.2.1. 「autoとして振る舞う」

widthやheightがautoに算出される場合と、autoが指定されたかのように振る舞う場合（例：ブロックのパーセンテージheightが不確定なサイズに対して解決される場合、CSS2§10.5参照）、 これら両方のケースで、そのプロパティはautoとして振る舞うと言います。

注: レガシー仕様の記述（特に[CSS2]）では、width/heightの算出値がautoであることを条件として明示的に言及されることがあります。 これらの一部は「autoとして振る舞う」と解釈するべきケースであり、CSSWGに報告して仕様の更新を促してください。

このセクションは新しい用語自動サイズへの参照で置き換える必要があります。

3.2.2. フロートの包含または除外

このセクションは規定的ではありません。

ブロックボックスの境界は通常フロートを通しますが、 著者が自身の（子孫の）フロートを含めたり、外部のフロートを除外したい場合があります。 ブロックレイアウトでは、 display: flow-rootを指定すると、そのボックスはフォーマッティングコンテキストのrootとなり、この挙動を持ちます。

注: Flex、Grid、Tableレイアウトに参加するボックスは自動的にこの挙動を持ちます。

3.3. サイズ指定のボックス端：box-sizingプロパティ

box-sizingプロパティは、 固定サイズ（<length>や<percentage>）が content boxに割り当てられるか、border boxに割り当てられるかを定義します。 これは全てのサイズ指定プロパティ（flex-basisなども含む）に影響します。

値には以下の意味があります：

content-box

サイズ指定プロパティで<length-percentage>で指定されたサイズは、ボックスの内側サイズ（マージン・ボーダー・パディングは含めない）を表します。 つまりcontent boxに適用されます。 ボックスのパディングとボーダーは 指定したwidthやheightの外側にレイアウト・描画されます。

注: これはCSS2.1で指定されたwidth/heightの挙動であり、デフォルトです。

border-box

サイズ指定プロパティで<length-percentage>で指定されたサイズは、 ボーダー・パディング（マージンは含まない）も含めた視覚的なサイズを表します。 これはborder boxに適用されます。 パディングとボーダーは 指定したwidthやheightの内側にレイアウト・描画され、 content boxが残りのスペースを埋めるようにサイズ指定され、ゼロで切り捨てられます（負にならない）。

コンテンツ幅・高さは、各辺のボーダー・パディングの幅を指定された<length-percentage>から差し引いて計算されます。 コンテンツ幅・高さは負にならないため、この計算はゼロで切り捨てられます。

使用値（例：getComputedStyle()などで取得）はborder boxを参照します。

box-sizingの影響を受ける値には、 素の<length-percentage>値や、fit-content()などの関数的記法で使われる値が含まれます。 一方、 autoやmin-contentなどの非量的な値は （特に指定されていなければ）box-sizingプロパティの影響を受けません。

.box {
  box-sizing:   content-box; /* default */
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}

.box {
  box-sizing:   border-box;
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}

.box {
  box-sizing:   border-box;
  width:        100px;
  padding-left: 60px;
  border-left:  60px solid;
  /* padding + border = 120px */
}

div.container {
  width:38em;
  border:1em solid black;
}

div.split {
  box-sizing:border-box;
  width:50%;
  border:1em silver ridge;
  float:left;
}

<div class="container">
<div class="split">このdivは左半分を占有します。</div>
<div class="split">このdivは右半分を占有します。</div>
</div>

注: 一部のHTML要素（ buttonなど）は デフォルトでborder-boxの挙動になります。 どの要素がこの挙動かはHTML仕様を参照してください。

従来の CSS 仕様では、 幅、高さ、最小（min）幅、最小（min）高さ、最大（max）幅、および最大（max）高さという用語は、特に示されない限り、一般に ボックスの内部サイズ （コンテンツボックスサイズ） を指す。

明確化が必要な場合は、CSS User Interface 3 § 3.1 Changing the Box Model: the box-sizing propertyや、 Visual formatting model details（[CSS2]）のセクションを参照してください。

3.4. 新しいカラム幅指定値：min-content、max-content、fit-content()値

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

min-content

段組コンテナーの内容の最小コンテンツインラインサイズを、最適な段幅として 指定する。

max-content

段組コンテナーの内容の最大コンテンツインラインサイズを、最適な段幅として 指定する。

fit-content(<length-percentage>)

最適な段幅を min(max-content size, max(min-content size, <length-percentage>))として指定する。

注：段幅が段ごとに異なることはない。 段幅が段組コンテナーの内容に基づいて決定される場合 （上記のキーワードの場合のように）、 そのすべての内容が考慮され、 算出された幅がすべての段で共有される。

4. 外在的サイズ決定

外在的サイズ指定は、要素の内容を考慮せず、要素の文脈に基づいてサイズを決定します。

4.1. パーセンテージサイズ指定

パーセンテージは、ボックスの包含 ブロックを基準として、ボックスのサイジングを指定する。

<article style="height: 60em">
  <figure style="height: 50%;">
    <img style="height: 50%;">
  </figure>
</article>

その包含ブロックのサイズが その内容のサイズに依存する場合に、パーセンテージをどのように解決するかの詳細については、 § 5.2.1 パーセンテージでサイズ指定されたボックスの内在的寄与を参照。

5. 内在的サイズ決定

内在的サイズ指定は、要素の文脈を考慮せず、要素の内容に基づいてサイズを決定します。

5.1. 内在的サイズ

各軸におけるボックスの最小コンテンツサイズとは、 その軸において autoサイズを指定されたフロートであり （かつ、その軸における最小サイズまたは最大サイズがなく）、 その包含ブロックのその軸におけるサイズがゼロである場合に、ボックスが持つことになるサイズである。 （言い換えると、「収まるように縮小」してサイズ指定されるときに持つ最小サイズである。）

各軸におけるボックスの最大コンテンツサイズとは、 その軸において autoサイズを指定されたフロートであり （かつ、その軸における最小サイズまたは最大サイズがなく）、 その包含ブロックのその軸におけるサイズが無限である場合に、ボックスが持つことになるサイズである。 （言い換えると、「収まるように縮小」してサイズ指定されるときに持つ最大サイズである。）

最小コンテンツサイズと最大コンテンツサイズは、総称して 内在サイズと 呼ばれる。

注：ボックスに優先アスペクト比がある場合、 反対側の次元におけるサイズ制約が転送され、 対象となる次元のautoサイズに影響を与えることがある。 CSS2§10を参照。

この仕様は、フロートのサイズを決定する方法を定義しない。 [CSS2]を参照されたい。 ただし、自然サイズを持たない置換要素の内在サイズは、 以下のように定義される：

優先アスペクト比がある場合：

最小コンテンツサイズには、 ゼロを使用する。

最大コンテンツサイズについて：

• 利用可能空間が インライン軸において確定している場合、 インラインサイズには、そのサイズに対するストレッチ フィットを使用し、 アスペクト比を使用してブロックサイズを計算する。

• そうでない場合に、 ボックスのmin-widthまたはmin-heightの算出値が<length> である場合、 そのサイズを使用し、アスペクト比を使用してもう一方の次元を計算する； 両方の次元に<length>の 最小値がある場合は、 全体のサイズがより大きくなる方を選択する。

  注：この場合は以前、ボックスの最小サイズではなく、 300x150 の既定サイズから計算されていた。 これはより適切な挙動であり、 ウェブ互換である可能性が高いと考えられるが、 問題がある場合は CSSWG にフィードバックを送られたい。

• そうでない場合は、 初期包含ブロックの対応する次元と一致するインラインサイズを使用し、 アスペクト比を使用してもう一方の次元を計算する。

優先アスペクト比がない場合：

最小コンテンツサイズと 最大コンテンツサイズの両方について：

• ボックスのその次元における最小サイズ（min-width/min-height）の算出値が<length> である場合、 そのサイズを使用する。

  注：この作者が制御可能な挙動は、 最小サイズプロパティに対する新しいauto値によって 可能になる。 これはより適切な挙動であると考えられるが、 ウェブ互換であるかどうかはまだ明らかでないため、 問題がある場合は CSSWG にフィードバックを送られたい。

• そうでない場合は、 必要に応じて、幅には300pxを および／または高さには150pxを 使用する。

heightまたはwidthがauto として振る舞うブロックレベルまたはインラインレベルの置換要素は、 その最大コンテンツサイズを使用するよう実質的に定義されているため（CSS2§10.3.2）、 この仕様は、上記の規則を、 heightとwidthの両方がauto として振る舞う 置換要素の未定義の場合に適用する。

注：この仕様は、 フロートのサイズを決定する方法を定義しない。 詳細については、[CSS2]、 その表示型に関連する CSS 仕様、 および／または既存の実装を 参照されたい。 将来の仕様では、これについて詳細に定義し、 CSS2 の「定義」がどのようなものであれ、 それを置き換える予定である。

HTML の<input type=text>要素や<textarea>要素などの テキスト入力コントロールのautoサイズは通常、固定サイズであるが、 そのような要素の内容は、 非置換ブロックコンテナーの場合と同様に、内容に基づく内在サイズを決定するために使用できる。 したがって、サイジングプロパティの min-contentおよびmax-contentキーワードは、 そのボックス内に含まれるテキストとして 値をレンダリングするフォームコントロールに対して、 内容に基づくサイズを表し、 通常の非置換要素と同様に、そのようなコントロールが 表示内容に収まるようにサイズを設定できるようにする。

この場合の内容は、入力コントロールの値 （textareaの場合は生の値、 inputの場合は値） として定義され、 より人間が読みやすい、および／またはローカライズされた表示形式に変換される可能性があり、 その後、入力コントロールの子テキストランとして扱われる。 ソフト折返し機会は、入力コントロールが実際に 折返しを許可する箇所でのみ認められる （CSS プロパティまたはその他の UA 内部の制約のいずれに基づくかを問わない）。 入力コントロールに、その値表示領域へ重ねて表示するための指定されたプレースホルダーテキストが ある場合、 そのテキストも、内容に基づくサイズを計算するために測定される—プレースホルダーテキストがその時点で表示されているかどうかは問わない。 （したがって、入力コントロールの内容に基づく内在サイズは、 プレースホルダーテキストを収めるサイズと 値を収めるサイズのうち、大きい方である。）

UA は、キャレットのための十分な空間を確保し、 その他の点でもフォームコントロールの使いやすさを維持するため、 フォームコントロールの最小コンテンツ および最大コンテンツサイズに最小値 （単一のゼロ幅文字を含むために必要なサイズ、 またはタッチターゲットとして使用可能な最小サイズなど） を強制してもよい。

注：これは、 iframe または内容を含むその他の置換要素へ拡張される可能性がある （議論を参照）が、 テキスト入力は主要なユースケースであり、 文書内部にあるため、 追加の複雑さが最も少ない。

5.2. 内在的寄与

ボックスの各軸におけるmin-content寄与/max-content寄与は、 仮想的なautoサイズのfloatが、そのボックスのみを含み、 その仮想floatの包含ブロックがゼロサイズ／無限サイズの場合のコンテンツボックスのサイズです。

注: この仕様ではこれらのサイズの厳密な決定方法は定義していません。 [CSS2]や該当するCSS仕様、パーセンテージ処理の規則（下記）、 既存実装などを参照してください。

5.2.1. パーセンテージサイズボックスの内在的寄与

パーセンテージでサイズ指定されたボックスの包含 ブロックのサイズが、そのボックス自体の内在サイズ寄与に依存し、 循環依存関係が生じることがある。 そのようなボックスの内在サイズ寄与を計算するとき （内容に基づく自動最小サイズの計算を含む）、 内在サイズ寄与と同じ軸におけるサイズを 基準として解決されるパーセンテージ値 （循環パーセンテージサイズ）は、 特別な方法で解決される：

1. ボックスが非置換である場合、 最大サイズプロパティまたは優先サイズ プロパティ（width/max-width/height/max-height）のうち、 循環するパーセンテージを含む式 （10%やcalc(10px + 0%)など）として 指定されたものは、その値全体が、ボックスの内在サイズ寄与を計算する目的に限り、 そのプロパティの初期値として扱われる。 例えば、width: calc(20px + 50%)が指定されたボックスでは、 その最大コンテンツ寄与は、widthがautoであるかのように計算される。 （ただし、ボックス自体を実際にサイズ指定するときには、 パーセンテージは通常どおり反映される。以下を参照。）
2. 同様に、ボックスが置換される場合、 最大サイズプロパティまたは優先サイズ プロパティのうち、循環するパーセンテージを含む式として指定されたものは、 その値全体が、ボックスの最大コンテンツ寄与を計算する目的に限り、 そのプロパティの初期値として扱われる。
3. ボックスが置換される場合、 最大サイズプロパティまたは優先サイズ プロパティ（width/max-width/height/max-height）の値に含まれる循環 パーセンテージは、 対応する軸の最小コンテンツ寄与を計算するとき、 ゼロを基準として解決される。 （これが適用される HTML 要素の一覧については、§ 5.2.2 圧縮可能な置換要素を 参照。） ボックスに優先アスペクト比もある場合、 この最小コンテンツ寄与は、反対側の軸から 優先アスペクト比を介して移送された<length-percentage>の最小サイズ—そのようなパーセンテージはすべてゼロを基準として解決する—を 下限とする。

   移送された パーセンテージは、移送する前にゼロではなくその包含ブロックを基準として解決すべきだろうか？議論を参照。

   UA は、特定の UI 要素が表示されたままになることを保証するなどの UI 上の考慮事項に基づいて、最小コンテンツ寄与に追加の下限を設けてもよい （例えば、 selectのドロップダウン矢印）。

   注：最小コンテンツ 寄与は、従来どおり、 それ自体の軸における最小 サイズも下限とする。

   この規則は、内容に基づく自動最小サイズまたはそれに対応するサイズ 寄与を計算するときにも適用され、 確定した「指定 サイズの提案」が得られる。

   例えば、 width: calc(50% + 50px)が 指定された inputの 最小コンテンツ 寄与は50pxに、 水平方向のマージン／ボーダー／パディングを加えた値となる。
4. 最小サイズ プロパティ、 およびマージンとパディング（ならびにガター）については、 循環 パーセンテージは、内在サイズ寄与を決定するとき、 ゼロを基準として解決される。

次に、特に指定がない限り、 包含ブロックの内容の使用サイズおよび位置を計算するとき：

• 循環依存関係が、 包含ブロックに指定されたblock-sizeまたはmax-block-sizeによって生じ、 それによって包含ブロックがその内容のサイズに依存する場合、 ボックスのパーセンテージは解決されず、代わりにauto として振る舞う。

  注：グリッドアイテムおよびフレックスアイテムでは、この場合でもパーセンテージの解決が認められる。

• そうでない場合、パーセンテージは包含ブロックのサイズを基準として解決される。 （包含ブロックのサイズは、結果として得られるボックスのサイズに基づいて再解決されないため、 内容が包含ブロックからオーバーフローまたはアンダーフローすることがある。）

注：これらの規則は、 CSS2§10.2、CSS2§8.3、 およびCSS2§8.4において以前は未定義だった この循環する場合の挙動を規定する。 また、CSS2 に記述されていないレイアウトモード （フレックスレイアウトなど）については、CSS2§10.5の挙動が、 それぞれの仕様によって置き換えられることにも注意されたい。

<article style="width: min-content">
  <aside style="width: 50%;">
  LOOOOOOOOOOOOOOOOOOOONG
  </aside>
</article>

<article style="height:auto">
  <aside style="height: 50%;">
    <div class=block style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:100px; min-height: min-content;">
  <aside style="height: 50%;">
    <div style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:auto; min-height: min-content;">
  <aside style="height: 50%;">
    <div class=block style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:100px; min-height: min-content;">
  <aside style="height: 200%;">
    <div style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

5.2.2. 圧縮可能な置換要素

HTML§14.4 [HTML] に列挙されている置換要素に加えて、 以下の HTML 要素も、上記のパーセンテージでサイズ指定された 置換要素の規則において、置換 要素とみなされ、 そのwidth/heightまたはmax-width/max-heightが循環パーセンテージサイズで表されている場合、 その最小コンテンツ寄与を圧縮できる：

• 「ボタン風」ではない任意の type を持つ input； これは UA によって異なる場合がある。

  ある型が特定の UA において「ボタン風」であるとは、その型が button 要素と同様に表示され、 要素のレイアウトを決定する実際の内容を含むことができる場合をいう。 ほとんどの UA では、「button」、「reset」、「submit」、および「color」型はボタン風である； 一部の UA では、「file」型も、 テキスト入力（縮小可能） とボタン（ボタン風であるため縮小不可）の組み合わせとして表示される場合、部分的にボタン風である。

• select、 textarea、 progress、 meter、 marquee。

これを max-width/height に適用する際のウェブ互換性および 実装の進捗状況は、Issue 6348 で追跡している。[Issue #6348]

変更点

最近の変更

2020年12月18日 作業草案以降の変更点：

• § 5.1 内在的サイズで置換要素のmax-contentサイズ定義のエラー修正 (Issue 6072)
• fit-contentサイズ定義にmin-content制約の記述を追加
• 置換要素の「内在的」寸法を「自然」寸法に名称変更し、内在的サイズとの混同を避ける (Issue 4961)
• その他細かな編集修正

2019年5月22日 作業草案以降の主な変更点：

• 関連するレイアウトモジュールによって別途指定されている場合、 min-contentおよびmax-contentが 必ずしもプロパティの初期値と同じようには振る舞わないことを 定義した。 （Issue 3973）
• fit-content()の内在的寄与を変更し、 内在的寄与の計算において、その引数が 単独で扱われる場合と同じように扱い、 それに応じて fit-content 式を解決するようにした。 これは、内在的寄与を計算するときのfit-content()の解決に 特別な挙動を持たせる方式からの変更である。 （Issue 3731）
• 内在サイズを持たない 置換ボックスの最大コンテンツサイズを変更し、 その最小サイズが<length>である場合にのみ、 ICB または 300px×150px の代わりに その最小サイズを使用するようにした。 § 5.1 内在サイズを参照。 （Issue 4217）
• 自然アスペクト比を持つオブジェクトの既定のサイジングを変更し、 300px×150px の代わりに ICB サイズを使用するようにした。 （Issue 4218）
• 優先アスペクト比を定義し、適切な箇所で「内在 アスペクト比」の代わりに使用した。
• その他の軽微な修正および編集上の修正。

2018年3月4日 作業草案以降の主な変更点：

• box-sizing定義をCSS UI Level 3からインポート
• 循環パーセンテージの扱いを厳密に規定 (#1132, #2384, #2297, #2674)
• bock軸の*-content値は初期値として算出せず、「初期値のように振る舞う」ように変更 (#2708)
• その他細かな修正

2017年2月7日 作業草案以降の主な変更点：

• 置換要素のmin-content/max-contentサイズ定義をより正確に
• 新キーワードを初期値に算出するように変更（block軸適用時、存在しないautoには算出しない）
• 置換要素のパーセンテージサイズはmin-content寄与をゼロにすることを明記
• 依存する包含ブロックに対して解決されるパーセンテージサイズの定義に関する修正（追加検討が必要）
• stretchやfit-contentキーワードをLevel 4に延期（不確定な包含ブロック時の挙動を検討するため）
• 全サイズ指定プロパティの完全定義を導入（差分ではなくフル定義）：width、height、min-width、 min-height、max-width', max-height、box-sizing。

CSS Level 2以降の追加点

自動・内容ベースのサイズ指定アルゴリズムの詳細強化に加え、[CSS2]以降、以下の新機能が追加されています：

• box-sizingプロパティ（[CSS-UI-3]で定義、現在は本仕様へ）
• min-content、max-content、fit-content()値（サイズ指定プロパティの新キーワード）
• auto初期値（min-width、 min-heightプロパティ。[CSS-FLEXBOX-1]で定義、現在は本仕様へ）

謝辞

このモジュールへの貢献に感謝します： L. David Baron、 Aaron Gustafson、 Daniel Holbert、 Mats Palmgren

プライバシーとセキュリティの考慮事項

自動レイアウトをサポートするため、 CSSはボックスを内容にフィットするようサイズ指定します。 [DOM]や[CSSOM]などのAPIと併用することで、 スクリプトからボックスサイズ情報が取得でき、 内容に関する情報が露出する可能性があります。 ただし、この情報はボックスサイズ経由よりも、DOMから内容を直接調査する方が簡単で直接的です。 内容の調査ができないコンテナ （例：クロスオリジンiframeなど）は、 外部ページにサイズ情報を露出しません。 ただし置換要素（画像など）は、自然サイズやアスペクト比を露出する場合があります。