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 抽象ボックス用語で定義されています。

サイズ

一次元または二次元の測定値： ブロックサイズや、インラインサイズ、 または、widthやheight。

内側サイズ

content-boxのサイズ。

外側サイズ

margin-boxのサイズ。

確定サイズ

レイアウトを行わずに決定できるサイズ。 つまり、<length>、 テキストの測定値（改行を考慮しない）、 初期包含ブロックのサイズ、 または <percentage> やその他の式 （例えば非置換ブロックの「stretch-fit」サイズ指定[CSS2]） で、確定サイズだけを基準に解決されるもの。

さらに、絶対位置指定要素の包含ブロックのサイズは、当該要素に関して常に 確定です。

不確定サイズ

確定でないサイズ。不確定な利用可能な空間は本質的に無限です。

利用可能な空間

ボックスがレイアウトされる空間を表すサイズであり、 そのボックスが参加するフォーマットコンテキストの規則によって決定されます。 ボックスの利用可能な空間は通常、 包含ブロックの測定値（それが確定している場合） か、無限サイズ（不確定な場合）です。利用可能な空間は、min-content制約や max-content制約でもあり得ます。 これにより、そこにレイアウトされるボックスはその制約下でレイアウトされます。

stretch fit

指定されたサイズへのストレッチフィットは、 そのサイズから、ボックスの計算上のマージン（折り畳まない、autoはゼロとする）、 境界線、およびその寸法でのパディングを差し引いたものです （外側サイズがぴったり合うように）、 かつゼロで切り捨てます （内側サイズが負にならないように）。

注: これは、auto幅の非置換ブロックが通常フローで計算される際の CSS2.1§10.3.3で使われる式です。

フォールバックサイズ

一部のサイズ指定アルゴリズムは、無限サイズではうまく機能しません。 その場合は、代わりにフォールバックサイズが使用されます。 特に指定がない限り、 これは初期包含ブロックのサイズです。

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プロパティは、content boxかborder boxかを指定します。

パーセンテージはボックスの包含ブロックのwidth/heightに対して解決されます。 もし特定の軸で包含ブロックのサイズがボックスのサイズに依存する場合、 パーセンテージの解決方法は該当するレイアウトモジュールを参照してください。

負の値は無効です。

auto

width/heightの場合、自動サイズ（自動的なブロックサイズ/自動的なインラインサイズ）を指定します。 計算方法は該当するレイアウトモジュールを参照してください。

min-width/min-heightの場合、 自動的な最小サイズを指定します。 該当するレイアウトモジュールで特に定義されていなければ、 使用値は0になります。 互換性維持のため、 このキーワードの解決値はすべての[CSS2] display型（ブロック・インライン・インラインブロック・テーブルレイアウトボックス）でゼロになります。 ボックスが生成されない場合もゼロになります。

none

ボックスのサイズに制限なし。

min-content

該当軸のmin-contentサイズを使用。 ボックスのブロックサイズの場合、特に指定がなければ自動サイズと同じです。

max-content

該当軸のmax-contentサイズを使用。 ボックスのブロックサイズの場合、特に指定がなければ自動サイズと同じです。

fit-content(<length-percentage>)

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

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

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

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

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

注: このセクションでは以前、stretchおよびfit-contentをそれぞれストレッチフィットサイズおよびfit-contentサイズとしてキーワード定義していました。 これらのキーワードはLevel 4に延期されました （containキーワードも追加される予定で、 これはstretchと似た挙動ですが、 推奨アスペクト比（もしあれば）を保持します） 不確定な利用可能な空間がある場合の挙動の整理のためです。

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仕様では、 width、height、最小（min）幅、最小（min）高さ、最大（max）幅、および最大（max）高さなどの用語は、特に指定がない限りボックスの内側サイズ （content-boxサイズ）を指します。

明確化が必要な場合は、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

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

max-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. 内在的サイズ

ボックスの各軸におけるmin-contentサイズは、その軸で autoサイズ（かつその軸に最小や最大サイズなし）が指定され、 さらに包含ブロックがその軸でゼロサイズの場合のfloatのサイズです。 （つまり「縮小フィット」時の最小サイズ。）

ボックスの各軸におけるmax-contentサイズは、その軸で autoサイズ（かつその軸に最小や最大サイズなし）が指定され、 さらに包含ブロックがその軸で無限サイズの場合のfloatのサイズです。 （つまり「縮小フィット」時の最大サイズ。）

min-contentサイズとmax-contentサイズは合わせて 内在的サイズと呼ばれます。

注: ボックスに推奨アスペクト比がある場合、反対側の寸法のサイズ制約が伝播し、 対象軸のautoサイズに影響する場合があります。 CSS2§10参照。

この仕様ではfloatのサイズ決定方法は定義しません。 [CSS2]を参照してください。 ただし、内在的サイズについて、 置換要素で自然サイズを持たない場合は以下に定義します：

推奨アスペクト比がある場合：

min-contentサイズにはゼロを使用します。

max-contentサイズについて：

• 利用可能な空間が確定したインライン軸の場合、そのサイズへのストレッチフィットのインラインサイズを使い、アスペクト比でブロックサイズを計算します。

• それ以外の場合 <length>を算出値としてmin-widthまたはmin-heightに持つ場合、その値を使い、もう一方の寸法はアスペクト比で計算します。 両方の寸法に<length>の最小値がある場合は、全体サイズが大きくなる方を選びます。

  注: このケースは以前は300x150のデフォルトサイズから計算されていましたが、 現在はボックスのminサイズから計算します。 この挙動の方が望ましく、Web互換性も高いと考えますが、問題があればCSSWGまでご連絡ください。

• それ以外の場合は、 インラインサイズは 初期包含ブロックの対応寸法に合わせ、 もう一方はアスペクト比で計算します。

推奨アスペクト比がない場合：

min-contentサイズとmax-contentサイズの両方について：

• その寸法に<length>を算出した最小サイズ（min-width/min-height）に持つ場合は、その値を使います。

  注: この挙動は新しいauto値の追加によって、著者が制御できるようになりました。 この方が望ましいですが、Web互換性が不明なため、問題があればCSSWGまでご連絡ください。

• それ以外の場合は、必要に応じて幅は300px、高さは150pxを使います。

heightやwidthがautoとして振る舞うブロックレベルまたはインラインレベルの置換要素は、 実質的にmax-contentサイズを使用する定義となっています（CSS2§10.3.2）。 この仕様では、heightとwidthが両方ともautoとして振る舞う置換要素の未定義ケースにも上記の規則を適用します。

注: この仕様ではfloatのサイズ決定方法は定義しません。 [CSS2]や該当するCSS仕様、既存実装等を参照してください。 将来的な仕様で詳細定義され、CSS2の「定義」に置き換えられる予定です。

autoサイズのtext inputコントロール（HTMLの<input type=text>や<textarea>要素）は通常は固定サイズですが、 これらの要素の内容も、非置換ブロックコンテナと同様に内容ベースの内在的サイズの決定に利用できます。 min-contentやmax-contentキーワードは、 サイズ指定プロパティで フォームコントロールの見える内容に基づくサイズを表し、 通常の非置換要素と同じように、値の内容にフィットするサイズ指定が可能です。

この場合の内容は、inputコントロールの値（textareaの場合はraw value、inputの場合はvalue） であり、より人間可読・ローカライズされた表示形式に変換される場合もあります。 このテキストはinputコントロールの子text runとして扱われ、ラップ可能箇所は、コントロールが実際にラップ可能な場所だけで許可されます。 （CSSプロパティやUA内部制約による） inputコントロールにプレースホルダテキストが指定されている場合は、 そのテキストも内容ベースサイズ計算の対象となり、表示されていなくても計算に含まれます。 （したがってinputコントロールの内容ベース内在的サイズは、 プレースホルダテキストと値の内容のうち大きい方のサイズとなります。）

UAはフォームコントロールのmin-contentやmax-contentサイズについて、 キャレットを十分に表示できるスペースやタッチターゲットの最小使用サイズなど、最小値を強制しても構いません。

注: この仕様は iframe や他の内容を持つ置換要素にも拡張される可能性があります（議論参照）。 ただしtext inputが主な利用例であり、文書内部なので追加の複雑性も最小です。

5.2. 内在的寄与

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

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

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

パーセンテージサイズボックスの包含ブロックのサイズが、 ボックス自身の内在的サイズ寄与に依存する場合、 循環依存が生じます。 このようなボックスの内在的サイズ寄与を計算する際 （内容ベースの自動最小サイズの計算も含む）、 同じ軸のサイズを基準に解決されるパーセンテージ値 （循環パーセンテージサイズ）は特別に解決されます：

1. ボックスが非置換の場合、 パーセンテージを含む式で指定されたmaxサイズプロパティや推奨サイズプロパティ （width/max-width/height/max-height） の値が10%やcalc(10px + 0%)など循環の場合、ボックスの内在的サイズ寄与の計算目的のみそのプロパティの初期値として扱います。 例えば、width: calc(20px + 50%)の場合、 max-content寄与はwidthがautoとして計算されます。 （ただし実際のボックスサイズ指定時には、パーセンテージは通常通り評価されます。下記参照。）
2. 同様に、ボックスが置換の場合も、 パーセンテージを含む式で指定されたmaxサイズプロパティや推奨サイズプロパティの値が循環の場合、ボックスのmax-content寄与の計算目的のみそのプロパティの初期値として扱います。
3. ボックスが置換の場合、 循環パーセンテージがmaxサイズプロパティや推奨サイズプロパティ （width/max-width/height/max-height） の値に含まれる場合、対応する軸のmin-content寄与の計算時にはゼロとして解決します。 （これがHTMLのどの要素に該当するかは§ 5.2.2 圧縮可能な置換要素参照。） さらにボックスに推奨アスペクト比がある場合、 このmin-content寄与は、 反対軸の<length-percentage> 最小サイズでゼロとして解決した値で床処理され、 推奨アスペクト比で伝播されます。

   伝播前にパーセンテージはゼロでなく包含ブロックで解決すべきか？議論参照。

   UAはUIの都合でmin-content寄与をさらに床処理しても構いません （例：selectのドロップダウン矢印が見えるようにするなど）。

   注: min-content寄与は常に、 自軸の最小サイズでも床処理されます。

   この規則は内容ベースの自動最小サイズや対応するサイズ寄与の計算にも適用され、 確定した「指定サイズの提案」を生みます。

   例： input にwidth: calc(50% + 50px)を指定した場合、 min-content寄与は50px＋左右のmargin/border/paddingとなります。
4. minサイズプロパティやmargin、padding（gutterも）については、 循環パーセンテージは 内在的サイズ寄与の決定時にゼロとして解決されます。

そして、特に指定がなければ、包含ブロックの内容の使用サイズや位置を計算する際：

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

  注: GridアイテムやFlexアイテムは、この場合でもパーセンテージが解決されます。

• それ以外の場合は、パーセンテージは包含ブロックのサイズを基準に解決されます。 （ただし、包含ブロックのサイズはボックスの算出サイズを元に再度解決されません。 そのため内容が包含ブロックをはみ出したり足りなかったりする場合があります。）

注: これらの規則は、CSS2§10.2、CSS2§8.3、 CSS2§8.4で未定義だった循環ケースの挙動を定めます。 またCSS2§10.5の挙動は、 各レイアウトモード（例：flexレイアウト） の仕様で上書きされています。

<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要素も、上記パーセンテージサイズ置換要素規則の対象となり、 min-content寄与が圧縮される場合があります。 これは、width/heightやmax-width/max-heightが循環パーセンテージで指定された場合に該当します：

• input のtypeが「ボタン型」でないもの（UAによって異なります）。

  特定のUAで「ボタン型」とは、 button 要素と同様に表示され、実際の内容が要素のレイアウトを決定する場合です。 多くのUAでは、"button"、"reset"、"submit"、"color"タイプがボタン型です。 "file"タイプは一部UAで、テキスト入力（圧縮可能）＋ボタン（ボタン型、圧縮不可）の組み合わせとして部分的にボタン型となります。

• 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式として解決するように変更 (Issue 3731)
• 置換ボックスのmax-contentサイズが内在的サイズを持たない場合、ICBや300px×150pxの代わりに最小サイズを使用（§ 5.1参照） (Issue 4217)
• 自然アスペクト比を持つオブジェクトのデフォルトサイズ決定をICBサイズに変更（300px×150pxではなく） (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など）は、 外部ページにサイズ情報を露出しません。 ただし置換要素（画像など）は、自然サイズやアスペクト比を露出する場合があります。