CSS ボックスサイジングモジュール Level 3

1. はじめに

この節は規範的ではありません。

CSS レイアウトには、さまざまなレイアウト計算で使用される自動サイズ指定に関する複数の異なる概念があります。 この節では、より正確な用語をいくつか定義し、 この仕様のレイアウト動作と他のモジュールで使用される計算との関連付けを容易にするとともに、 width および height プロパティ用の新しいキーワードをいくつか定義して、 これらのサイズ計算から得られる寸法を要素に割り当てられるようにします。

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

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

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

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

1.2. 値の定義

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

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

2. 用語

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

サイズ

1次元または2次元の測定値: ブロックサイズおよび／または インラインサイズ。 あるいは 幅および／または 高さ。

内側サイズ

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

外側サイズ

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

確定サイズ

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

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

不確定サイズ

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

注: 内在サイズ指定キーワード（max-content など）は不確定です。 サイズ包含や子が存在しないことなどにより、 子をレイアウトせずに決定できる場合でも同様です。

利用可能 空間

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

テスト

• available-height-for-replaced-content-001.html （ライブ テスト） （ソース）
• table-percentage-max-width-beside-float.html （ライブ テスト） （ソース）
• table-percentage-min-width-below-float.html （ライブ テスト） （ソース）
• table-percentage-min-width-beside-float.html （ライブ テスト） （ソース）

stretch fit

指定されたサイズへのstretch fitは、 そのサイズから、指定された次元におけるボックスの算出済みマージン （相殺せず、auto をゼロとして扱う）、境界、およびパディングを差し引いたものです （外側サイズが完全に適合するようにします）。 また、ゼロを下限とします （内側サイズが負にならないようにするためです）。

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

フォールバックサイズ

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

2.1. 自動ボックスサイズ

CSS には、自動的に決定されるサイズが4種類あります （コンテキストに応じて auto サイズ指定規則から得られるサイズ）:

stretch-fit サイズ

stretch-fit インライン サイズ

stretch-fit ブロック サイズ

指定された軸において、ボックスの外側サイズが 利用可能空間を満たす場合に、 ボックスが取るサイズ。 言い換えると、利用可能空間が 確定である場合、その空間への stretch fitです。 利用可能空間が不確定である場合は未定義です。

注: インライン 軸では、これは 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 ブロックサイズ

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

理想的なmax-content サイズがmin-content サイズより小さくなる場合 （たとえば負のマージンを使用したことによる場合）、 実効的なmax-content サイズはmin-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 サイズ, stretch-fit サイズ, max-content サイズ) （すなわち max(min-content サイズ, min(max-content サイズ, stretch-fit サイズ))）。 min-content 制約の下でサイズ指定する場合は、 min-content サイズと等しくなります。 それ以外の場合は、その軸におけるmax-content サイズと等しくなります。

注: これは CSS2.1§10.3.5 および CSS Multi-column Layout § 3.4 では「shrink-to-fit」幅と呼ばれます。

内在サイズ

max-content サイズまたはmin-content サイズ、 すなわち、主としてコンテンツのサイズから生じるサイズです。 （この用語の一部の用法では、これら2つのサイズのいずれかから主として導出されるサイズも指す場合があります。）

置換要素は、その内在サイズを、 自然寸法から導出することがよくあります。

次の例では、内側の <div> の幅に fit-content サイズ指定を適用し、 さまざまなサイズの包含ブロック内に配置します:

• 最も狭い包含ブロック（2ch）では、 ボックスはmin-content サイズを取ります。つまり、可能な限り狭く折り返された すべてのコンテンツを完全に収めるために、包含ブロックからオーバーフローします。

• 中央の包含ブロック（9ch）では、 ボックスはstretch-fit サイズを取ります。つまり、コンテンツを内部に収まるよう 折り返しながら、包含ブロックを正確に満たします。

• 最も広い包含ブロック（16ch）では、 ボックスはmax-content サイズを取ります。つまり、包含ブロックより小さいものの、 折り返されていないコンテンツを正確に囲みます。

<!DOCTYPE html>
<style>div > div { width: fit-content; }</style>
<div style="width: 2ch;">
  <div>abc def ehg</div>
</div>
<div style="width: 9ch;">
  <div>abc def ehg</div>
</div>
<div style="width: 16ch;">
  <div>abc def ehg</div>
</div>

ここで width の代わりに min-width または max-width プロパティを使用すると、 これらと同じサイズがそれぞれ最小幅または最大幅として適用され、 優先幅を制約して 使用幅を決定します。 § 3 ボックスサイズの指定および § 3.2 サイズ指定 値: <length-percentage>、auto | none、stretch、min-content、max-content、および fit-content 値を参照してください。

2.2. 内在サイズ寄与

max-content 寄与

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

min-content 寄与

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

内在サイズ 寄与

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

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

理想的なmax-content 寄与がmin-content 寄与より小さくなる場合 （たとえば負のマージンを使用したことによる場合）、 実効的なmax-content 寄与は min-content 寄与を下限とします。

2.3. 内在サイズ制約

max-content 制約

ボックスの包含ブロックによって課されるサイズ指定制約であり、 ボックスにmax-content 寄与を生成させます。

min-content 制約

ボックスの包含ブロックによって課されるサイズ指定制約であり、 ボックスにmin-content 寄与を生成させます。

優先アスペクト 比

ボックスに固有の幅:高さの比率であり、 さまざまなサイズ指定アルゴリズムに対し、 他のサイズ指定入力を尊重しながら可能な限りそのアスペクト比と一致するサイズを生成するよう バイアスをかけます。 特に指定がない限り、 ボックスの優先アスペクト比は、存在する場合にはその 自然アスペクト比であり、 そのコンテンツボックスに適用されます。 ほとんどのボックスには優先アスペクト比がありません。

テスト

• replaced-fractional-height-from-aspect-ratio.html （ライブ テスト） （ソース）

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

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

この節では、適用されるボックスの優先、最小、および最大サイズを指定する サイズ指定プロパティを定義します。 取り得る値は次の節、 § 3.2 サイズ指定値: <length-percentage>、auto | none、stretch、min-content、 max-content、および fit-content 値で定義されます。

フロー相対バリアント（inline-size、block-size など）は、 要素自身の書字モードを使用して対応付けられ、 物理対応物（width、height など）とは、 [CSS-LOGICAL-1] で定義されているように相互作用します。 CSS Writing Modes 3 § 6 抽象ボックス用語も参照してください。

CSS では、最小サイズと最大サイズの両方が 使用サイズを制約しますが、 最小サイズ制約が常に最も強い制約です。 さらに、内側サイズは常に ゼロを下限とします。

3.1.1. 優先サイズプロパティ: width、height、inline-size、およびblock-size プロパティ

width および height（物理）、 および inline-size と block-size（フロー相対）は、 ボックスの 優先 幅 および 高さ（物理）、 または インラインサイズ および ブロックサイズ（フロー相対）を それぞれ指定するサイズ指定プロパティです。

3.1.2. 最小サイズプロパティ: min-width、min-height、min-inline-size、およびmin-block-size プロパティ

min-width および min-height（物理）、 および min-inline-size と min-block-size（フロー相対）は、 ボックスの 最小幅（「min width」） および 最小高さ（「min height」）、 または 最小インラインサイズ（「min inline size」） および 最小ブロックサイズ（「min block size」）を それぞれ指定するサイズ指定プロパティです。

注: auto という初期値は新しいものです。 [CSS2] では初期値は ゼロでした。

3.1.3. 最大サイズプロパティ: max-width、max-height、max-inline-size、およびmax-block-size プロパティ

max-width および max-height（物理）、 および max-inline-size と max-block-size（フロー相対）は、 ボックスの 最大幅（「max width」） および 最大高さ（「max height」）、 または 最大インラインサイズ（「max inline size） および 最大ブロックサイズ（「max block size）を それぞれ指定するサイズ指定プロパティです。

3.2. サイズ指定値: <length-percentage>、auto | none、stretch、min-content、max-content、およびfit-content 値

次の値はサイズ指定プロパティで使用されます。 auto と none 以外の値は、 <box-size> 生成規則の下にまとめられます:

<box-size> = <length-percentage> | stretch | min-content | max-content | fit-content

注: Level 2 における <box-size> に相当するものは、 単に <length-percentage> のみです。

<length-percentage [0,∞]>

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

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

負の値は無効です。

テスト

• thin-element-render.html （ライブ テスト） （ソース）

auto

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

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

none

ボックスのサイズに制限を設けません。

stretch

stretch-fit サイズ指定を適用し、 ボックスのマージンボックスのサイズを その包含ブロックのサイズに一致させようとします。 § 4.2 Stretch-fit サイズ指定: 包含ブロックを満たすを参照してください。

テスト

• block-height-001.html （ライブ テスト） （ソース）
• flex-line-001.html （ライブ テスト） （ソース）
• flex-line-002.html （ライブ テスト） （ソース）
• flex-line-003.html （ライブ テスト） （ソース）
• flex-line-004.html （ライブ テスト） （ソース）
• flex-line-005.html （ライブ テスト） （ソース）
• min-width-1.html （ライブ テスト） （ソース）
• parsing.html （ライブ テスト） （ソース）
• positioned-non-replaced-1.html （ライブ テスト） （ソース）
• positioned-replaced-1.html （ライブ テスト） （ソース）
• positioned-replaced-2.html （ライブ テスト） （ソース）
• positioned-replaced-3.html （ライブ テスト） （ソース）
• stretch-block-size-001.html （ライブ テスト） （ソース）
• stretch-block-size-002.html （ライブ テスト） （ソース）
• stretch-block-size-003.html （ライブ テスト） （ソース）
• stretch-inline-size-001.html （ライブ テスト） （ソース）
• stretch-inline-size-002.html （ライブ テスト） （ソース）
• stretch-inline-size-003.html （ライブ テスト） （ソース）
• stretch-max-block-size-001.html （ライブ テスト） （ソース）
• stretch-max-inline-size-001.html （ライブ テスト） （ソース）
• stretch-min-block-size-001.html （ライブ テスト） （ソース）
• stretch-min-inline-size-001.html （ライブ テスト） （ソース）
• stretch-quirk-001.html （ライブ テスト） （ソース）

min-content

関連する軸のmin-content サイズを使用します。 ボックスのブロックサイズでは、 特に指定がない限り、 これはその自動サイズと等価です。

テスト

• clone-intrinsic-size.html （ライブ テスト） （ソース）
• clone-nowrap-intrinsic-size-bidi.html （ライブ テスト） （ソース）
• clone-nowrap-intrinsic-size.html （ライブ テスト） （ソース）
• min-content-negative-margin-crash.html （ライブ テスト） （ソース）
• replaced-max-height-min-content.html （ライブ テスト） （ソース）
• replaced-max-size-saturation.html （ライブ テスト） （ソース）
• replaced-max-width-min-content.html （ライブ テスト） （ソース）
• replaced-min-height-min-content.html （ライブ テスト） （ソース）
• replaced-min-width-min-content.html （ライブ テスト） （ソース）
• shrink-to-fit-sizing-max-width-min-content.html （ライブ テスト） （ソース）
• slice-intrinsic-size.html （ライブ テスト） （ソース）
• slice-nowrap-intrinsic-size-bidi.html （ライブ テスト） （ソース）
• slice-nowrap-intrinsic-size.html （ライブ テスト） （ソース）
• svg-no-ar-max-height-min-content.html （ライブ テスト） （ソース）
• svg-no-ar-min-height-min-content.html （ライブ テスト） （ソース）

max-content

関連する軸のmax-content サイズを 使用します。 ボックスのブロックサイズでは、 特に指定がない限り、 これはその自動サイズと等価です。

fit-content

関連する軸のfit-content サイズを使用します。 すなわち、 min(max-content, max(min-content, stretch)) です。

テスト

• fit-content-block-size-abspos.html （ライブ テスト） （ソース）
• fit-content-block-size-fixedpos.html （ライブ テスト） （ソース）
• fit-content-contribution-001.html （ライブ テスト） （ソース）
• fit-content-min-inline-size.html （ライブ テスト） （ソース）
• fit-content-percentage-padding.html （ライブ テスト） （ソース）
• float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-001.html （ライブ テスト） （ソース）
• float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-002.html （ライブ テスト） （ソース）
• float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-003.html （ライブ テスト） （ソース）
• float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-004.html （ライブ テスト） （ソース）

すべての場合において、 使用値は負でない内側サイズを維持するよう、ゼロを下限とします。

注: stretch、min-content、max-content、およびfit-content 値は Level 3 で新しく追加されました。

注: flex-basis プロパティも、その値が <'width'> を参照して定義されているため、 これらの新しいキーワードを取得します。

3.2.1. 「auto として動作する」

width/height の算出値が auto である場合と、 auto が指定されたかのように動作すると定義されている場合 （たとえば、ブロックのパーセント高さが 不確定サイズに対して解決される場合。 CSS2§10.5 を参照）の両方を表す共通用語として、 これらの両方の場合に、プロパティはauto として動作する といいます。

注: 従来の仕様のレイアウト動作を定義する文章、 とりわけ [CSS2] では、 条件として width/height の算出値が auto であることを 明示的に参照している場合があります。 これらの一部は、auto として動作することを意味すると解釈し、 更新のため CSSWG に報告する必要があります。

この節を、 新しい用語 自動サイズへの参照に置き換える。

3.2.2. 浮動体の包含または除外

この節は非規範的です。

ブロックボックスの境界は通常、浮動体を通過させますが、 作成者が自身の（子孫）浮動体を包含する必要がある場合や、 外部の浮動体を除外する必要がある場合があります。 ブロックレイアウトでは、 display: flow-root を指定すると、 ボックスはこの動作を持つ整形コンテキストのルートになります。

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

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

box-sizing プロパティは、 固定サイズ（<length> や <percentage> など）が コンテンツボックスに割り当てられるか、境界ボックスに割り当てられるかを定義します。 これは、flex-basis を含む、すべての サイズ指定プロパティの解釈に影響します。

各値の意味は次のとおりです:

content-box

サイズ指定 プロパティで <length-percentage> として指定されたサイズは、 マージン／境界／パディングを除いたボックスの内側サイズを表します。 これらはコンテンツボックスに適用されます。 ボックスのパディングおよび境界は、 指定されたwidth および height の 外側にレイアウトされ描画されます。

注: これは CSS2.1 で指定された width および height の動作であり、 したがって既定値です。

テスト

• box-sizing-content-box-001.xht （ライブ テスト） （ソース）
• box-sizing-content-box-002.xht （ライブ テスト） （ソース）
• box-sizing-content-box-003.xht （ライブ テスト） （ソース）

border-box

サイズ指定プロパティ内の任意の <length-percentage> 値は、 境界ボックスに適用され、 したがって視覚的に見えるボックスのサイズを表します。 ボックスのパディングおよび境界（ただし マージンは除く）は、 実質的に使用width および height の内側にレイアウトされ描画され、 コンテンツボックスは残りの空間を満たすようサイズ指定されます。 より具体的には、 コンテンツボックスの幅および高さは、 対応する軸の境界およびパディングを、指定された <length-percentage> から差し引いて計算し、 結果をゼロを下限とします （ボックスの内側サイズは負になれないためです）。

サイズ指定プロパティの使用値も、 たとえば getComputedStyle() を通じて公開される場合、 境界ボックスを指します。

テスト

• border-box-and-max-content-001.html （ライブ テスト） （ソース）
• border-box-and-max-content-002.html （ライブ テスト） （ソース）
• border-box-and-max-content-003.html （ライブ テスト） （ソース）
• box-sizing-border-box-001.xht （ライブ テスト） （ソース）
• box-sizing-border-box-002.xht （ライブ テスト） （ソース）
• box-sizing-border-box-003.xht （ライブ テスト） （ソース）
• box-sizing-border-box-004.xht （ライブ テスト） （ソース）
• table-child-percentage-height-with-border-box.html （ライブ テスト） （ソース）

box-sizing の影響を受ける値には、 生の <length-percentage> 値と、 fit-content() [css-sizing-4] などの 関数記法内で使用される値の両方が含まれます。 対照的に、 auto や min-content などの 非数量的な値は、別途指定されない限り、 box-sizing プロパティの影響を受けません。

.box {
  box-sizing:   content-box; /* 既定値 */
  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">This div occupies the left half.</div>
<div class="split">This div occupies the right half.</div>
</div>

注: 一部の HTML 要素、 たとえば button などは、既定で border-box の動作になります。 この動作を持つ要素の詳細については HTML を参照してください。

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

視覚整形モデルの詳細の節におけるこれらの用語を 明確に区別する方法については、 CSS User Interface 3 § 3.1 ボックスモデルの変更: box-sizing プロパティを参照してください。これは[CSS2] に関するものです。

3.4. 新しいカラムサイズ指定値: stretch、min-content、max-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 インラインサイズ)) として指定します。

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

4. 外在サイズの決定

外在サイズ指定は、 コンテンツを考慮せず、要素のコンテキストに基づいてサイズを決定します。

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

パーセント値は、ボックスの包含 ブロックを基準にボックスのサイズを指定します。

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

包含ブロックのサイズが そのコンテンツのサイズに依存する場合のパーセント値の解決方法については、 § 5.2.1 パーセント指定されたボックスの内在寄与を参照してください。

4.2. Stretch-fit サイズ指定: 包含ブロックを満たす

Stretch-fit サイズ指定は、 min-height/min-width/max-height/max-width による制約を尊重しつつ、 ボックスの主ボックスの外側サイズが 包含ブロックを可能な限り満たすために必要な長さに、 ボックスの使用サイズを設定しようとします。

パーセントサイズが確定値に解決できる軸で使用される場合

auto マージンをゼロとして扱い、 マージンボックスが包含ブロックを正確に満たすようサイズ指定します。 （これにより内側 サイズが負になる場合は、 代わりにマージンボックスを、 内側サイズがゼロになるようサイズ指定します。）

フロー内のブロックレベルボックスで、 独立整形コンテキストを形成するものについては、 包含ブロックのインラインサイズの代わりに、 行ボックスに利用可能な空間 （すなわち浮動体を除く）を使用します。

フロー内のブロックレベルボックスについて、 ブロック 軸のサイズを解決する際: パーセント値が基準とする祖先要素に ブロック始端の境界またはパディングがなく、 かつ独立整形コンテキストでない場合、 このサイズを計算する目的では、要素のブロック始端マージンをゼロとして扱います。 ブロック終端 マージンについても同様に扱います。

注: これはマージンが親のマージンと 相殺される効果を模擬します。 実際にマージンを抑制するわけではないため、 何らかの理由で要素が実際には親とマージン相殺できない場合、 stretch-fit サイズは、親に完全に収まるには実際には大きすぎる可能性があります。

それ以外

優先サイズプロパティでは、 auto として動作します。 最小サイズ プロパティでは、 0 として動作します。 最大サイズ プロパティでは、 none として動作します。

<div class="parent">
  <div class="child">text</div>
</div>

.parent { height: 200px; border: solid; }
.child { height: stretch; margin: 10px; }

.outer { height: 200px; margin: 0; }
.inner { height: stretch; margin: 10px; }

<div class="parent">
  <div class="child">text</div>
</div>
some more text

.parent { float: left; margin: 0; }
.child { width: stretch; margin: 10px; }

.parent { height: auto; margin: 0; }
.child { height: stretch; margin: 10px; }

注: stretch-fit サイズは通常、 stretch 自己整列と等価ですが、 常にそうとは限りません。 たとえば、複数行のフレックスレイアウトでは、 stretch-fit サイズは包含ブロックに対して直接解決され、 そのサイズを行の交差サイズに寄与します。 一方、stretch は、 最終的に行の交差サイズに対して解決される前に、 fit-content サイズを寄与します。

5. 内在サイズの決定

内在サイズ指定は、 コンテキストを考慮せず、要素のコンテンツに基づいてサイズを決定します。

5.1. 内在サイズ

各軸におけるボックスのmin-content サイズは、 その軸で auto 優先サイズが与えられ （かつその軸に最小または最大サイズがなく）、 その包含ブロックがその軸でゼロサイズである浮動体であった場合に取るサイズです。 （言い換えると、「shrink-to-fit」でサイズ指定された場合に取る最小サイズです。）

各軸におけるボックスのmax-content サイズは、 その軸で auto 優先サイズが与えられ （かつその軸に最小または最大サイズがなく）、 その包含ブロックがその軸で無限サイズである浮動体であった場合に取るサイズです。 （言い換えると、「shrink-to-fit」でサイズ指定された場合に取る最大サイズです。）

min-content サイズとmax-content サイズをまとめて 内在サイズと呼びます。

注: ボックスに優先アスペクト比がある場合、 反対側の次元のサイズ制約が転送され、 検討対象の次元におけるauto サイズに影響する場合があります。 CSS2§10 を参照してください。

この仕様は、浮動体のサイズを決定する方法を定義しません。 [CSS2] を参照してください。 ただし、置換要素で自然サイズを持たないものの 内在サイズは、 以下で定義します:

非退化の優先アスペクト比を持つ場合:

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

max-content サイズには:

• 利用可能空間が インライン軸で確定している場合、 インラインサイズにはそのサイズへのstretch fitを使用し、 アスペクト比を使用してブロックサイズを計算します。

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

  注: この場合は以前、 ボックスの最小サイズではなく、300x150 の既定サイズから計算されていました。 この方がより良い動作であり、 Web 互換である可能性が高いと考えられていますが、 問題がある場合は CSSWG にフィードバックを送ってください。

  テスト

  • replaced-fractional-height-from-aspect-ratio-2.html （ライブ テスト） （ソース）

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

優先アスペクト比を持たない場合:

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

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

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

• それ以外の場合、 必要に応じて幅には 300px、 および／または高さには 150px を使用します。

  注: これはアスペクト比を意味するものではありません。

ブロックレベルまたはインラインレベルの置換要素で、 height または width がauto として動作するものは、 実質的にmax-content サイズを使用すると定義されているため （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 は、キャレットのために十分な空間を確保し、 その他の点でもフォームコントロールの使いやすさを維持するため、 フォームコントロールの min-content および max-content サイズに 最小値 （単一のゼロ幅文字を含めるために必要なサイズや、 タッチターゲットとして使用可能な最小サイズなど）を課してもよいです。

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

5.2. 内在寄与

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

注: この仕様は、これらのサイズを決定する方法を 厳密には定義していません。 詳細については、[CSS2]、 その表示型に関連する CSS 仕様、 パーセント値を処理する規則（以下）、 および／または既存の実装を参照してください。

この目的では、stretch 自己整列および stretch-fit サイズ指定は、 外在的に解決できる場合、 解決可能なパーセント値と同様に確定とみなされます。

5.2.1. パーセント指定されたボックスの内在寄与

パーセントでサイズ指定されたボックスの包含 ブロックのサイズが、 そのボックス自身の内在サイズ寄与に依存し、 循環依存が生じる場合があります。 そのようなボックスの内在サイズ寄与を計算するとき （コンテンツベースの自動最小サイズに関する計算を含む）、 内在サイズ寄与と同じ軸のサイズに対して解決される パーセント値（循環パーセントサイズ）は、 特別に解決されます:

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

   転送する前に、転送されるパーセント値をゼロではなく包含ブロックに対して解決するべきでしょうか？ 議論を参照してください。

   UA はさらに、UI 上の考慮事項に基づいて min-content 寄与に下限を設定してもよいです。 たとえば、特定の UI 要素が表示されたままになることを保証する場合 （例: select のドロップダウン矢印）です。

   注: min-content 寄与は、常にそうであるように、 自身の軸の最小 サイズも下限とします。

   この規則は、 コンテンツベースの自動最小サイズ またはそれに対応するサイズ寄与を計算する場合にも適用され、 確定した「指定サイズ提案」を生成します。

   テスト

   • intrinsic-percent-replaced-028.html （ライブ テスト） （ソース）
   たとえば、 width: calc(50% + 50px) が割り当てられた input は、水平マージン／境界／パディングに加えて、 50px のmin-content 寄与を持ちます。
4. 最小サイズ プロパティ、 およびマージンとパディング （およびガター）では、 内在サイズ寄与を決定する際、 循環パーセント値はゼロに対して解決されます。

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

• 循環依存が、包含ブロック上の最小サイズ以外の ブロック軸サイズ （すなわち、多くのレイアウトモードではblock-size または max-block-size、 フレックス レイアウトでは flex-basis）によって導入され、 そのサイズがコンテンツのサイズに依存することになる場合、 ボックスのパーセント値は解決されず、代わりにauto として動作します。

  注: グリッドアイテムは両軸で、 フレックスアイテムは主軸で、 またフレックスアイテムの子は両軸で、 この場合でもパーセント値を解決することを許可します。

• それ以外の場合、パーセント値は包含ブロックのサイズに対して解決されます。 （包含ブロックのサイズは、その結果として得られるボックスのサイズに基づいて再解決されません。 したがって、コンテンツは包含ブロックからオーバーフローまたはアンダーフローする場合があります。）

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

<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 が 循環パーセントサイズで表される場合、そのmin-content 寄与を 圧縮できます:

• input のうち、「button-like」ではない任意の type。 これは UA によって異なる場合があります。

  特定の UA において、ある type が button 要素と同様に表示され、 要素のレイアウトを決定する実際のコンテンツを含められる場合、 その type は「button-like」です。 ほとんどの UA では、"button"、"reset"、"submit"、"color" の各 type が button-like です。 一部の UA では "file" type も部分的に button-like であり、 テキスト入力（縮小可能）とボタン（button-like であり縮小不能）の組み合わせとして表示されます。

• select、 textarea、 progress、 meter、 marquee。

これを max-width/height に適用することの Web 互換性および実装進捗を Issue 6348 で追跡しています。[Issue #6348]

変更点

最近の変更点

2021年12月17日付作業 草案以降の変更点:

• fit-content() を Level 4 に移動し、fit-content および stretch を Level 4 から移しました。 （Issue 10601）
• [CSS-LOGICAL-1] から、 フロー相対サイズ指定プロパティの定義を取り込みました。 （Issue 10189）
• stretch-fit サイズ指定の詳細を明確化しました。 （Issue 11044、 Issue 11006、 Issue 11076、 Issue 4028、 Issue 13260、 Issue 11489）
• サイズ指定値を統合するため、 <box-size> 文法生成規則を導入しました。 （Issue 13478）
• 優先アスペクト比を持つ置換要素の 内在サイズを求める規則は、アスペクト比が非退化の場合にのみ適用されることを明確化しました。 （Issue 12612）
• aspect-ratio [css-sizing-4] が、 auto 最小サイズの 解決値を auto のまま保持することを定義しました。 （Issue 11716）
• max-content サイズおよびmax-content 寄与が、 min-content サイズ/min-content 寄与を下限とすることを明確化しました。 （Issue 12076）
• 内在サイズ寄与の計算における循環パーセント値の処理を明確化しました。 （Issue 6822）
• 内在サイズの計算において stretch サイズがパーセント値と同様に処理されることを明確化しました。 （Issue 10619）
• 内在サイズキーワードの不確定性を明確化しました。 （Issue 7206）
• サイズ指定プロパティに論理プロパティグループを追加しました。 （Issue 2822）
• Web Platform Tests のカバレッジを追加しました。
• その他、各種の軽微な編集上の修正および改善。

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

• auto が他の値と組み合わされた場合、 構文解析が曖昧にならないよう、 contain-intrinsic-size 値の順序を修正しました。 （Issue 6391）
• contain-intrinsic-size: auto について、 最後に記憶されたサイズを持たなくてもよい要素を明確化しました。 （Issue 6220）
• contain-intrinsic-size: auto を、 content-visibility が auto である場合に限定しました。 （Issue 6308）

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

• § 5.1 内在サイズにおける 置換要素の max-content サイズ定義のさまざまな誤りを修正しました。 （Issue 6072）
• fit-content サイズの定義に、 min-content 制約を処理する欠落していた記述を追加しました。
• 内在サイズとの混同を避けるため、 置換要素の「intrinsic」寸法を「natural」寸法に改名しました （Issue 4961 を参照）。
• その他、各種の軽微な編集上の修正および改善。

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

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

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

• box-sizing の定義を CSS UI Level 3 から取り込みました。
• 循環パーセント値の処理をより厳密に指定しました。 （#1132、 #2384、 #2297、 #2674）
• ブロック軸に適用される *-content 値を、 プロパティの初期値に算出するのではなく、 プロパティの初期値として「動作する」よう変更しました。 （#2708）
• その他の軽微な誤りを修正しました。

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

• 置換要素の min-content および max-content サイズをより正確に定義しました。
• ブロック軸に適用された場合、新しいキーワードを、存在しない可能性のある 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] で定義され、 その後ここへ移動）。
• サイズ指定 プロパティの stretch、min-content、max-content、およびfit-content 値。
• min-width および min-height プロパティの auto 初期値 （元々 [CSS-FLEXBOX-1] で定義され、 その後ここへ移動）。

謝辞

このモジュールへの貢献について、 L. David Baron、 Aaron Gustafson、 Daniel Holbert、 および Mats Palmgren に特に感謝します。

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

自動レイアウトをサポートするため、 CSS はコンテンツに適合するようボックスをサイズ指定します。 これを、ボックスのサイズをスクリプトに返すことができる各種の [DOM] および [CSSOM] API と組み合わせることで、 コンテンツに関する情報が露出する可能性があります。 ただし、この情報は、ボックスのサイズを介して間接的に取得するよりも、 コンテンツについて DOM を調べることで、より直接かつ容易に取得できます。 コンテンツを調べることができないコンテナー （クロスオリジンの iframe など）も、外側のページにサイズ情報を公開しません。 ただし、画像などの置換要素が 自然サイズおよび／またはアスペクト比を公開する範囲は除きます。

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

この仕様について、新たなセキュリティ上の考慮事項は報告されていません。