CSS の内在的＆外在的サイズ法

1.1. ~module間の相互作用

この~moduleは `CSS2$r 10 章と `CSS3COL$r にて定義される，次の特色機能を拡張する： `width$p, `height$p, `min-width$p, `min-height$p, `max-width$p, `max-height$p, `column-width$p ◎ This module extends the width, height, min-width, min-height, max-width, max-height, and column-width features defined in [CSS2] chapter 10 and in [CSS3COL]

この~moduleにおける `box-sizing$p ~propの定義は、 `CSS-UI-3$r におけるそれに取って代わる。 ◎ The definition of the box-sizing property in this module supersedes the one in [CSS-UI-3].

1.2 値

【 この節の内容は CSS 日本語訳 共通ページ に委譲 】

2.1. 自動~box~size

~CSSには、次に挙げる 4 種の自動的に決定される~sizeがある（これらは、文脈に依存して， `~autoS$v ~sizingの規則による結果で~sizeする）： ◎ There are four types of automatically-determined sizes in CSS (sizes resulting from auto sizing rules, depending on context):

`収納伸張~size@ （ `stretch-fit size^en ）

`収納伸張 行内~size@（ `stretch-fit inline size^en ）

`収納伸張 塊~size@（ `stretch-fit block size^en ）

所与の軸において，~boxの`外縁~size$が【 “外在的” に所与の】`可用な空間$を埋めたときに占めることになる`~size$ — 言い換えれば、`可用な空間$に`収まるよう伸張-$した~size。 ただし、`可用な空間$が`確定的$である場合に限る — `不定$の場合には定義されない。 ◎ The size a box would take if its outer size filled the available space in the given axis; in other words, the stretch fit into the available space, if that is definite. Undefined if the available space is indefinite.

注記： `行内-軸$に対しては、これは `CSS2.1, 10.3.5 節$において “`available width^en （可用幅）” とも呼ばれており、 `CSS2.1, 10.3.3 節$の規則により，算出される。 ◎ Note: For the inline axis, this is called the “available width” in CSS2.1§10.3.5 and computed by the rules in CSS2.1§10.3.3.

注記： この~sizeを孕む計算は、`可用な空間$が`不定$になり得るときには，~fallbackの挙動を指定する必要がある。 ◎ Note: Calculations involving this size need to specify a fallback behavior for when the available space is indefinite if that happens to be possible.

`最大-内容~size@（ `max-content size^en ）

可用な空間が無限のときの，所与の軸における~boxの “理想的な” `~size$。 通例的には、所与の軸において，~boxが その内容を収納しつつ 占め得るような，最も小さい`~size$になる。 すなわち、~overflowを避けつつ，埋められない空間は最小化したときの~size。 ◎ A box’s “ideal” size in a given axis when given infinite available space. Usually this is the smallest size the box could take in that axis while still fitting around its contents, i.e. minimizing unfilled space while avoiding overflow.

`最大-内容 行内~size@（ `max-content inline size^en ）

`行内-軸$における，~boxの “理想的な” `~size$。 通例的には、`自動折返し機会$（ “非強制改行” ）は採用しない下で、~boxが，その内容を収納したときに 占め得る最も狭小な`行内~size$になる（ `内在的~sizeの決定法$ を見よ）。 ◎ The box’s “ideal” size in the inline axis. Usually the narrowest inline size it could take while fitting around its contents if none of the soft wrap opportunities within the box were taken. (See §4 Intrinsic Size Determination.)

注記： これは、 `CSS2.1, 10.3.5 節$においては “`preferred width^en（選好~横幅）” と呼ばれ， CSS2.1, 17.5.2.2 節 においては “`maximum cell width^en （最大 cell 横幅）” と呼ばれているものである。 ◎ Note: This is called the “preferred width” in CSS2.1§10.3.5 and the “maximum cell width” in CSS2.1§17.5.2.2.

`最大-内容 塊~size@（ `max-content block size^en ）

`塊-軸$における，~boxの “理想的な” `~size$。 通例的には、~layout後の内容の`塊~size$になる。 ◎ The box’s “ideal” size in the block axis. Usually the block size of the content after layout.

`最小-内容~size@（ `min-content size^en ）

~overflowが生じないような — より大きい~sizeを選べばそれを避けれるような — ~boxが占め得る最も小さい~size（`内在的~sizeの決定法$を見よ）。 ◎ The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size. (See §4 Intrinsic Size Determination.)

`最小-内容 行内~size@（ `min-content inline size^en ）

行内~次元において~overflowが生じないような，~boxが占め得る最も狭小な`行内~size$。 概ね、`自動折返し機会$をすべて採用する下で、~boxが，その内容を収納するときの`行内~size$。 ◎ The narrowest inline size a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger inline size. Roughly, the inline size that would fit around its contents if all soft wrap opportunities within the box were taken.

注記： これは、 `CSS2.1, 10.3.5 節$においては “`preferred minimum width^en（選好~最小~横幅）” と呼ばれ， CSS2.1, 17.5.2.2 節 においては “`minimum content width^en（最小~内容~横幅）” と呼ばれているものである。 ◎ Note: This is called the “preferred minimum width” in CSS2.1§10.3.5 and the “minimum content width” in CSS2.1§17.5.2.2.

`最小-内容 塊~size@（ `min-content block size^en ）

`最大-内容 塊~size$に等価。 ◎ Equivalent to the max-content block size.

`内容収納~size@（ `fit-content size^en ）

`内容収納 行内~size@（ `fit-content inline size^en ）

`内容収納 塊~size@（ `fit-content block size^en ）

所与の軸に`可用な空間$が`確定的$な下では：

`min^op( `最大-内容~size$, `max^op( `最小-内容~size$, `収納伸張~size$ ) )

他の場合：

`最大-内容~size$。

◎ If the available space in a given axis is definite, equal to min(max-content size, max(min-content size, stretch-fit size)). Otherwise, equal to the max-content size in that axis.

注記： これは、 `CSS2.1, 10.3.5 節$, および CSS Multi-column Layout, 3.4 節† においては， “最短収納（ `shrink-to-fit^en ）” 横幅と呼ばれている。 【† 後者には、該当する呼称は見当たらず，何を指しているのか不明。】 ◎ Note: This is called the “shrink-to-fit” width in CSS2.1§10.3.5 and CSS Multi-column Layout § 3.4.

2.2. 内在的~size供与

~boxが`供与する@ 〜 ~size（ `contribute^en ／ `contribution^en ）

〜 に記された部分（あるいは文脈）に応じて，［ `最大-内容 供与$, `最小-内容 供与$ ］のいずれかを表す。

“供与する” とは、~boxが，［［ 自身が関与する~layout文脈 ］における~layout計算の必要 ］に応じて，自身の~sizeを，その~layout文脈に 供与する ことを意味する。

【 この項目は，原文には存在しないが、意味の補完, および翻訳による言い回しと各種~定義との関係を明瞭にするため，この訳に導入している。 】

`最大-内容 供与@（ `max-content contribution^en ）

~boxが、その`包含塊$に`供与する$，`最大-内容~size$。 ◎ The size that a box contributes to its containing block’s max-content size.

`最小-内容 供与@（ `min-content contribution^en ）

~boxが、その`包含塊$に`供与する$，`最小-内容~size$。 ◎ The size that a box contributes to its containing block’s min-content size.

内在的~size供与は、~boxの`外縁~size$に基づく【したがって、負にもなり得る】 — この目的においては、 `auto^v ~marginは 0 に扱われる。 ◎ Intrinsic size contributions are based on the outer size of the box; for this purpose auto margins are treated as zero.

2.3. 内在的~size拘束

`最大-内容 拘束@（ `max-content constraint^en ）

~boxに その`最大-内容 供与$を生産させるような，~boxの`包含塊$が~boxに課す~sizingの拘束。 【例えば、~sizeの上限】 ◎ A sizing constraint imposed by the box’s containing block that causes it to produce its max-content contribution.

`最小-内容 拘束@（ `min-content constraint^en ）

~boxに その`最小-内容 供与$を生産させるような，~boxの`包含塊$が~boxに課す~sizingの拘束。 ◎ A sizing constraint imposed by the box’s containing block that causes it to produce its min-content contribution.

3.1. 各種 ~sizing~prop

この節は、各種 `~sizing~prop@ — `width$p, `height$p, `min-width$p, `min-height$p, `max-width$p, `max-height$p — を定義する。 これらがとり得る値は ~sizingを与える値 節にて定義される。 ◎ This section defines the sizing properties width, height, min-width, min-height, max-width, and max-height. Their potential values are defined in the next section, §3.2 Sizing Values: the <length-percentage>, auto | none, min-content, max-content, and fit-content() values.

注記： これらの~propの`~flow相対$な各種 別名~propは、 `CSS-LOGICAL-1$r に定義される。 ◎ Note: Additional flow-relative aliases to these properties are defined in [CSS-LOGICAL-1].

~sizing~propの各~pair（例： `width$p, `height$p ）用に 略式~propを定義したい所だが、 `page$at `size$d 記述子 `CSS-PAGE-3$r と命名が競合する。 なので、これは~level 4 に先送りされた。 この問題を解決する方法について示唆があれば歓迎する。 論点を見よ。 ◎ We would like to define shorthands for each pair of sizing properties (e.g. width and height) but there is a naming conflict with the @page size descriptor [CSS-PAGE-3], so this has been deferred to Level 4. Suggestions on how to resolve this problem are welcome, see discussion.

3.2. ~sizingを与える値

`length-percentage$t

［ `length$t や `percentage$t ］を用いて，~boxの~sizeを指定する。 `box-sizing$p ~propは、［ `内容~box$, `~border~box$ ］のどちらが計量されるかを指示する。 ◎ Specifies the size of the box using <length> and/or <percentage>. The box-sizing property indicates whether the content box or border box is measured.

百分率は、~boxの`包含塊$の~size — 横幅, 縦幅のうち適切な方 — を基準に解決される。 ［ 当該の軸において，`包含塊$の~sizeが~boxの~sizeに依存する ］場合に 百分率を解決する特別な規則については、関連する各種~layout~moduleを見よ。 ◎ Percentages are resolved against the width/height, as appropriate, of the box’s containing block. If, in a particular axis, the containing block’s size depends on the box’s size, see the relevant layout module for special rules on how to resolve percentages.

負の値は無効。 ◎ Negative values are invalid.

`~autoS@v

［ `width$p ／ `height$p ］に対しては、 `自動的~size@ を指定する。 これを計算する方法は、関連する各種~layout~moduleを見よ。 ◎ For width/height, specifies an automatic size. See the relevant layout module for how to calculate this.

［ `min-width$p ／ `min-height$p ］に対しては、 `自動的~最小~size@ を指定する。 関連する~layout~moduleにより他が定義されない限り、これは，使用値 `0^v に解決される。 ◎ For min-width/min-height, specifies an automatic minimum size. Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0.

後方互換性を得るため，この~keywordの`解決値$は、 `CSS2$r による`表示~型$の~box — 塊~box, 行内~box, 行内~塊, すべての~table~layout~box — に対しては， 0 になるとする。 ◎ For backwards-compatibility, the resolved value of this keyword is zero for boxes of all [CSS2] display types: block and inline boxes, inline blocks, and all the table layout boxes.

`none@v

~boxの~sizeは、制限されない。 ◎ No limit on the size of the box.

`min-content@v

`行内-軸$に対し指定された場合、`最小-内容 行内~size$を利用する。 ◎ If specified for the inline axis, use the min-content inline size;＼

他の場合、当の~propの`初期値$と同じに挙動する。 ◎ otherwise behaves as the property’s initial value.

`max-content@v

`行内-軸$に対し指定された場合、`最大-内容 行内~size$を利用する。 ◎ If specified for the inline axis, use the max-content inline size;＼

他の場合、当の~propの`初期値$と同じに挙動する。 ◎ otherwise behaves as the property’s initial value.

`~fit-contentLP@v

`行内-軸$に対し指定された場合、`可用な空間$を指定された引数に置換した下で，内容収納~公式を適用した結果 — すなわち，次を利用する ⇒ `min^op( `max-content$v, `max^op( `min-content$v, `length-percentage$t ) ) ◎ If specified for the inline axis, use the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>));＼

他の場合、当の~propの`初期値$と同じに挙動する。 ◎ otherwise behaves as the property’s initial value.

負の値は無効。 ◎ Negative values are invalid.

すべての事例において，使用値は、`内縁~size$が負にならない所まで切上げられる。 ◎ In all cases, the used value is floored to preserve a non-negative inner size.

注記： `min-content$v, `max-content$v, `fit-content()$f 値は、 Level 3 による新たな値である。 ◎ Note: The min-content, max-content, and fit-content() values are new in Level 3.

注記： これにより、 `flex-basis$p ~propも，これら新たな~keywordをとり得ることになる — その値は <‘`width$p’> への参照により定義されているので。 ◎ Note: The flex-basis property hereby also gains these new keywords, as its values are defined by reference to <width>.

注記： この節は、以前まで［ `stretch^v ／ `fit-content^v ］を［ `収納伸張~size$ ／ `内容収納~size$ ］を表現する~keywordとして定義していた。 これらの~keywordは、`可用な空間$が`不定$な状況に より良く働くようにするため， Level 4 に先送りされた（追加の `contain^v ~keywordとともに — それは、 `stretch^v と同様に挙動するが，内在的~縦横比があれば それを保全する）。 ◎ Note: This section previously defined stretch and fit-content as keywords representing the stretch-fit size and fit-content size, respectively. These keywords have been deferred to Level 4 (along with an additional contain keyword that behaves similarly to stretch but preserves the intrinsic aspect ratio, if any) to better work out the implications in situations with indefinite available space.

3.3. ~sizingの~~対象になる~box辺： `box-sizing^p ~prop

`box-sizing$p ~propは、固定的~size（ `length$t や `percentage$t など）を［ `内容~box$, `~border~box$ ］のどちらにあてがうかを定義する。 それは、すべての~sizing~prop — `flex-basis$p も含む — の解釈に影響する。 ◎ The box-sizing property defines whether fixed sizes (such as <length>s and <percentage>s) are assigned to the content box or to the border box. It affects the interpretation of all sizing properties, including flex-basis.

各種~値の意味は： ◎ Values have the following meanings:

`content-box@v

各種~sizing~propに `length-percentage$t として指定された~sizeは、~boxの`内縁~size$ — ~margin, ~border, ~paddingは除外された~size — を表現し，内容~boxに適用される。 ~boxの［ ~padding ／ ~border ］は、指定された［ `width$p, `height$p ］の外側に~lay-outされ, 描かれる。 ◎ Sizes specified on sizing properties as <length-percentage> represent the box’s inner sizes, excluding the margins/border/padding: they are applied to the content box. The padding and border of the box are laid out and drawn outside the specified width and height.

注記： これが、 CSS2.1 により指定される `width^p, `height^p の挙動であり，既定になる。 ◎ Note: This is the behavior of width and height as specified by CSS2.1, and is thus the default.

`border-box@v

各種~sizing~propに `length-percentage$t として指定された~sizeは、~boxの，視覚に~~現れる~size — ~border, ~paddingは含むが ~marginは除外された~size — を表現し，~border~boxに適用される。 ~boxの［ ~padding ／ ~border ］は、指定された［ `width$p, `height$p ］の内側に~lay-outされ, 描かれる。 内容~boxは、残りの空間を埋めるように~sizeされる — 0 以上に切上げられる下で。 ◎ Sizes specified on sizing properties as <length-percentage> represent the box’s visually-apparent sizes, including the borders/padding (but not margin): they are applied to the border box. The padding and border of the box are laid out and drawn inside the specified width and height, with the content box sized to fill the remaining space, floored at zero.

内容の~sizeは、［ 横幅, 縦幅 ］のそれぞれについて，［ ~sizing~propに指定された~size ］から［ ~border, ~padding ］の~sizeを減算して計算される。 内容の~sizeは，負になれないので、この計算は 0 以上に切上げられる。 ◎ The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified <length-percentage>. As the content width and height cannot be negative, this computation is floored at zero.

具体的には、 `getComputedStyle()$c を通して公開される使用値も，~border~boxを参照する。 ◎ Used values, as exposed for instance through getComputedStyle(), also refer to the border box.

`box-sizing$p は、［ 生の `length-percentage$t 値, `fit-content()$f などの関数記法~内で利用される値 ］の両者に影響する — 対照的に、［ `~autoS$v, `min-content$v ］などの数量的でない値には，波及しない（他が指定されない限り）。 ◎ Values affected by box-sizing include both raw <length-percentage> values and those used in functional notations such as fit-content(). In contrast, non-quantitative values such as auto and min-content are not influenced by the box-sizing property (unless otherwise specified).

.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^v
◎
padding + border = 120px
 */
}

div.container {
  margin:1em; width:90%
}


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>

注記： `button$e など，ある種の~HTML要素では、 `border-box$v の挙動が既定になる。 どの要素がこの挙動を備えるかの詳細は、~HTMLを見よ。 【参照：~HTML~UA~stylesheet】 ◎ Note: Certain HTML elements, such as button, default to border-box behavior. See HTML for details on which elements have this behavior.

旧来の~CSS仕様における用語［ `横幅$ ／ `縦幅$ ／ `最小~横幅$ ／ `最小~縦幅$ ／ `最大~横幅$ ／ `最大~縦幅$ ］は、一般に — 他が指示されない限り — ~boxの`内縁~size$（`内容~box$の~size）を指している。 ◎ In legacy CSS specifications, the terms width, height, minimum (min) width, minimum (min) height, maximum (max) width, and maximum (max) height generally refer to the inner size (content-box size) of a box unless otherwise indicated.

`CSS2$r の 視覚的~整形~modelの詳細 における，これらの用語の明示的な一義化については、 CSS3 UI の `box-sizing^p 節 を見よ。 ◎ Refer to CSS Basic User Interface Module Level 3 (CSS3 UI) §box-sizing for an explicit disambiguation of these terms for the Visual formatting model details section of [CSS2].

仕様~策定者は、横幅や縦幅などの用語の利用が多義的になるのを避けるべきである — 各~事例ごとに 適切に［ `内縁~size$ ／ `外縁~size$ ／ ~border~boxの~size ／ `~sizing~prop$の`算出値$ ／ 等々 ］を明示的に指すように~linkして。 ◎ To avoid ambiguities, specification authors should avoid ambiguous uses of terms such as width or height without further qualification, and should explicitely refer and link to the inner size, the outer size, the size of the border-box, the computed value of the sizing properties, etc, as appropriate for each case.

3.4. 柱~sizingを与える新たな値

`column-width$p 用の値に利用される新たな~keywordは、最適とされる柱幅を指定する： ◎ When used as values for column-width, the new keywords specify the optimal column width:

【 “最適（ `optimal^en ）” の意味は `column-width$p の記述を~~参照。 】

`min-content@v2

最適~柱幅を、`複柱~容器$の内容の `最小-内容 行内~size$ として指定する。 ◎ Specifies the optimal column width as the min-content inline size of the multi-column container’s contents.

`max-content@v2

最適~柱幅を、`複柱~容器$の内容の `最大-内容 行内~size$ として指定する。 ◎ Specifies the optimal column width as the max-content inline size of the multi-column container’s contents.

`~fit-contentLP@v2

最適~柱幅を、次の結果として指定する ⇒ `min^op( `最大-内容~size$, `max^op( `最小-内容~size$, `length-percentage$t ) ) ◎ Specifies the optimal column width as min(max-content size, max(min-content size, <length-percentage>))

注記： 柱幅は、柱ごとに変わることは決してない。 柱幅が（上で与えた~keywordにより）`複柱~容器$の内容に基づく場合，その内容~すべてが考慮され、計算した結果の横幅は，すべての柱から共有される。 ◎ Note: The column width never varies by column. When the column width is informed by the multi-column container’s contents (as in the keywords above), all of its contents are taken under consideration and the calculated width is shared by all the columns.

4.1. 内在的~size

各~軸における，~boxの`最小-内容~size$は — 以下の~sizeは、当の軸における~sizeを表すとするとき — ［ 浮動体が、~size 0 の包含塊~内で，~sizeに `~autoS$v が与えられていた（かつ, その軸において`最小~size$／`最大~size$は与えられていない） ］とするときの~sizeになる（言い換えれば、 “最短収納” として~sizeされたときの，最小~size）。 ◎ The min-content size of a box in each axis is the size it would have if it was a float given an auto size in that axis (and no minimum or maximum size in that axis) and if its containing block was zero-sized in that axis. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

各~軸における，~boxの`最大-内容~size$は — 以下の~sizeは、当の軸における~sizeを表すとするとき — ［ 浮動体が、~size無限の包含塊~内で，~sizeに `~autoS$v が与えられていた（かつ, その軸において`最小~size$／`最大~size$は与えられていない） ］とするときの~sizeになる（言い換えれば、 “最短収納” として~sizeされたときの，最大~size）。 ◎ The max-content size of a box in each axis is the size it would have if it was a float given an auto size in that axis (and no minimum or maximum size in that axis), and if its containing block was infinitely-sized in that axis. (In other words, the maximum size it has when sized as “shrink-to-fit”.)

注記： ~boxに内在的~縦横比がある場合、一方の次元における~size拘束が，もう一方に伝達して，その `~autoS$v ~sizeに影響し得ることに注意。 CSS2, 10 節を見よ。 ◎ Note: Note that when the box has an intrinsic aspect ratio, size constraints in the opposite dimension will transfer through and can affect the auto size in the considered one. See CSS2§10.

`置換され$る要素に対しては、`最大-内容~size$が包含塊の~sizeに依存することになるために（内在的~縦横比は伴うが，内在的~sizeを伴わない画像など），~size無限の包含塊に対し計算できない場合： ◎ For replaced elements, if the max-content size size would depend on the size of the containing block (as it does for images with an intrinsic aspect ratio but no intrinsic size, see CSS2§10.3.2) and therefore can’t be calculated against an infinitely-sized containing block then:

~boxは 内在的~縦横比を伴うが，内在的~sizeは伴わない場合： ◎ For boxes with an intrinsic aspect ratio, but no intrinsic size:

• `行内-軸$における`可用な空間$は`確定的$である場合、その~sizeに`収まるよう伸張-$する行内~sizeを利用し，塊~sizeは その結果から縦横比を用いて計算する。 ◎ If the available space is definite in the inline axis, use the stretch fit into that size for the inline size and calculate the block size using the aspect ratio.

• 他の場合，~boxの［ `min-width$p, `min-height$p ］のうち片方だけ`確定的$ならば、その~sizeを利用した上で，他方の次元は 縦横比を用いて計算する。 両方とも`確定的$な場合も、同様に計算した結果が大きくなる方を選ぶ。 ◎ Otherwise if the box has a definite non-zero min-width or min-height, use that size and calculate the other dimension using the aspect ratio; if both dimensions have a definite minimum, choose the one that results in the larger overall size.

  注記： この事例は、以前は~boxの `min-^p ~sizeではなく，既定~size 300 × 150 から計算されていた。 こうした方がより良く挙動するものと予見され，~web互換になるものと見込まれるが、問題があれば CSSWG まで~feedbackを~~寄せられたし。 ◎ Note: This case was previous calculated from a 300x150 default size, rather than the box’s min size. This is believed to be a better behavior, and likely to be web compatible, but please send feedback to the CSSWG if there are any problems.

• 他の場合，［ `横組$ ／ `縦組$ ］の下では、［ 横幅 ／ 縦幅 ］には［ `300px^v ／ `150px^v ］を利用し，［ 縦幅 ／ 横幅 ］は 縦横比を用いて計算する。 ◎ Otherwise use a width of 300px (height of 150px in vertical writing modes) and calculate the other dimension using the aspect ratio.

~boxは 内在的~縦横比を伴わない場合： ◎ For boxes without an intrinsic aspect ratio:

• 適切な方の次元において，`可用な空間$は`確定的$である場合、その次元においては，その~sizeに`収まるよう伸張-$する。 ◎ If the available space is definite in the appropriate dimension, use the stretch fit into that size in that dimension.
• 他の場合，当の次元における~boxの`最小~size$は`確定的$かつ 0 でないならば、その~sizeを利用する。 ◎ Otherwise, if the box has a definite non-zero minimum size (min-width/min-height) in that dimension, use that size.
• 他の場合、必要に応じて［ 横幅には `300px^v ／ 縦幅には `150px^v ］を用いる。 ◎ Otherwise, use 300px for the width and/or 150px for the height as needed.

［ 塊~level／行内~level ］の`置換され$る要素のうち， `height$p, `width$p いずれかが`~autoとして挙動する$ものは、実質的に，要素の`最大-内容~size$を利用するように定義されるので（ CSS2, 10.3.2 節 ）、この仕様は，未定義であった［ `height$p, `width$p とも`~autoとして挙動する$ような，`置換され$る要素の事例 ］に上の規則を適用する。 ◎ Since a block-level or inline-level replaced element whose height or width behaves as auto is effectively defined to use its max-content size (CSS2§10.3.2), this specification applies the rules above to the undefined case of a replaced element whose height and width both behave as auto.

注記： この仕様は、浮動体の~sizeを決定する方法は定義しない。 詳細は、 `CSS2$r, その`表示~型$に関連する各種~CSS仕様, あるいは 既存の実装を~~参照されたし。 将来の仕様は、 CSS2 による “定義と呼べるほどでもないもの” を置換して，これを詳細に定義することになる。 ◎ Note: This specification does not define how to determine the size of a float. Please refer to [CSS2], the relevant CSS specification for that display type, and/or existing implementations for further details. A future specification will define this in detail, replacing the CSS2 “definition”, such as it is.

~text入力~control — ~HTMLの［ `<input type=text>^c, `textarea$e ］要素など — に対する `~autoS$v ~sizeは，概して固定されるが、内容に基づく内在的~sizeを決定するときには，そのような要素の内容も利用され得る — `置換され$ない塊~容器に対するときと同じく。 したがって，`~sizing~prop$の［ `min-content$v ／ `max-content$v ］~keywordは、自身の値を［ 自身の~boxの中に包含される~text ］として描画する~form~controlに対しては，内容に基づく~sizeを表現する。 そのような~controlの可視の内容が — 定例の`置換され$ない要素と同様に — ~boxに収まるように~size可能にするため。 ◎ Although the auto size of text input controls such as HTML’s <input type=text> and <textarea> elements is typically a fixed size, the contents of such elements can be used to determine a content-based intrinsic size, as for non-replaced block containers. The min-content and max-content keywords of the sizing properties thus represent content-based sizes for form controls which render their value as text contained within their box, allowing such controls to size to fit their visible contents similarly to regular non-replaced elements.

この事例における内容は、入力~controlの値（ `textarea$e の事例では その`生の値$ ／ `input$e の事例では その`値$ ）になるものと定義され、入力~controlの子である`~text連なり$として扱われる — 場合によっては，［ より人から読み易い／地域化された ］表示~形式に形式変換された上で、入力~controlが（ ~CSS~propや, ~UAに内部的な他の拘束に基づいて）折返しが実際に許容される所に限り，`自動折返し機会$を許容するように。 入力~controlに［ 仮入力~textが指名されていて【 `placeholder$a 属性などにより】，値の表示~区画~内に重ねられる ］場合、その~textも，内容に基づく~sizeを計算する目的で計量される — 所与の時点で仮入力~textは可視かどうかに応じて（したがって，当の入力~controlの内容に基づく内在的~sizeは、［ 仮入力~textが収まる~size, 値が収まる~size ］の両者~以上になる）。 ◎ The content in this case is defined to be the input control’s values (the raw value in the case of textarea, or the value in the case of input), possibly transformed to a more human-readable and/or localized display format, which is then treated as child text runs of the input control, allowing soft wrap opportunities only where the input control would actually allow wrapping (whether keyed off of CSS properties or other, UA-internal constraints). If the input control has designated placeholder text to be overlaid in its value display area, then that text is also measured for the purpose of calculating the content-based size—whether or not the placeholder text is visible at the moment. (Thus the content-based intrinsic size of the input control is the larger of the size to fit the placeholder text and the size to fit the value.)

~UAは、~form~controlの［ `最小-内容~size$／`最大-内容~size$ ］を［ ~caretに足る空間を確保する, あるいは ~form~controlの使い勝手を保守する ］ための最小に施行して~MAY（ 1 個のゼロ幅~文字を包含するために要求される~size／ ~touch-targetに利用-可能な最も小さい~size など）。 ◎ The UA may enforce a minimum (such as the size required to contain a single zero-width character, or the smallest usable size of a touch target) on the form control’s min-content and max-content sizes to ensure sufficient space for the caret and otherwise maintain usability of the form control.

注記： これは、 `iframe$e その他の［ `置換され$る, かつ内容を包含している要素 ］にまで拡張され得る（ 論点 を見よ）。 が、~text入力が大多数の利用事例であり、文書に内部的であるゆえに追加される最低限の複雑さになる。 ◎ Note: This might be extended to iframe or other content-containing replaced elements (see discussion), but text inputs are a major use-case; and being document-internal, have the least additional complications.

4.2. 内在的~供与

各~軸における，~boxの［ `最小-内容 供与$ ／ `最大-内容 供与$ ］は、［ その~boxのみを包含する， `~autoS$v により~sizeされた浮動体 %F ］を仮に考えるとき、 %F の包含塊が~size［ 0 ／ 無限 ］とするときの， %F の内容~boxの~sizeになる。 ◎ A box’s min-content contribution/max-content contribution in each axis is the size of the content box of a hypothetical auto-sized float that contains only that box, if that hypothetical float’s containing block is zero-sized/infinitely-sized.

注記： この仕様は、これらの~sizeを決定する方法は精確に定義しない。 詳細は、次を~~参照されたし ⇒＃ `CSS2$r ／ 当の`表示~型$に関連する各種~CSS仕様 ／ 百分率の取扱い規則（下に述べる）／ 既存の実装 ◎ Note: This specification does not define precisely how to determine these sizes. Please refer to [CSS2], the relevant CSS specification for that display type, the rules for handling percentages (below), and/or existing implementations for further details.

5.1. 百分率による~sizing

百分率は、~boxの`包含塊$を基準に~boxの~sizingを指定する。 ◎ Percentages specify sizing of a box with respect to the box’s containing block.

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

ある~boxの`包含塊$の~sizeが~boxの内在的~size供与に依存していて，~boxは百分率で~sizeされているために、循環依存が生じることもある。 そのような~boxの`内在的~size供与$を計算するときは、循環する百分率 — すなわち、百分率~値は包含塊の~sizeを基準に解決することになるが，その~sizeも当の百分率に依存している — は、特別に解決される： ◎ Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box, a cyclic percentage—that is, a percentage value that would resolve against a containing block size which itself depends on that percentage—is resolved specially:

• ~boxが`置換され$ない場合、~boxの［ `最大~size~prop$／`選好~size~prop$ ］用に［ 百分率を包含している式として指定された値（ `10%^v や `calc(10px + 0%)^v など）全体 ］が循環する場合、 ~boxの内在的~size供与を計算する目的に限り，その~propの初期値をとるものと扱われる。 例えば，~boxに `width$p: `calc(20px + 50%)^v が与えられている下では、~boxの`最大-内容 供与$は［ `width^p は `~autoS$v にされていた ］かのように計算される。 （しかしながら，実際に~box自身を~sizeする間は、百分率は通例通り尊守される。） ◎ If the box is non-replaced, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contribution only as that property’s initial value. For example, given a box with width: calc(20px + 50%), its max-content contribution is calculated as if its width were auto. (The percentage is honored as usual, however, during the actual sizing of the box itself; see below.)

• ~boxが`置換され$る場合、［ `最大~size~prop$／`選好~size~prop$ ］の値~内の循環する百分率は、対応している軸における`最小-内容 供与$を計算するときには， 0 を基準に解決される（これが，~HTMLにおけるどの要素に適用されるかは、 圧縮-可能な置換される要素 を見よ）。 ~UAは、~UIに関する考慮点 — ある種の~UI要素（例えば， `select$e 要素の~dropdown-arrow）が可視であり続けることを確保するなど — に基づいて，この~sizeをさらに切上げてよい。 ◎ If the box is replaced, a cyclic percentage in the value of any max size property or preferred size property (width/max-width/height/max-height), is resolved against zero when calculating the min-content contribution in the corresponding axis. (See Compressible Replaced Elements for a list of which elements in HTML this applies to.) The UA may additionally floor this size based on UI considerations, such as ensuring certain UI elements remain visible (for example, the dropdown arrow on a select).

  例えば `width$p: `calc(50% + 50px)^v があてがわれている `input$e 要素の`最小-内容 供与$は、 `50px^v に横方向の［ ~margin, ~border, ~padding ］を加えたものになる。 ◎ For example, an input assigned width: calc(50% + 50px) has a min-content contribution of 50px, plus any horizontal margin/border/padding.

  注記： ~form~controlに対する百分率による `max-width$p を 0 化するのが，~web互換になるかどうか、 100% 確かなわけではない。 Issue 765 を見よ。 ◎ Note: We are not 100% sure if zeroing out a percentage max-width on form controls is web-compatible. See Issue 765.

• `最小~size~prop$に対しては、`内在的~size供与$を決定するときは — ~margin, ~padding【に対する百分率】に加えて — 循環する百分率も 0 を基準に解決される。 ◎ For the min size properties, as well as for margins and paddings, a cyclic percentage is resolved against zero for determining the intrinsic size contribution.

次に，包含塊の内容の使用［ ~size, 位置 ］を計算するときには、他が指定されない限り： ◎ Then, unless otherwise specified, when calculating the used sizes and positions of the containing block’s contents:

• 百分率は、包含塊の［ `block-size$p ／ `max-block-size$p ］に因り循環依存が生じているときには，解決されずに`~autoとして挙動する$とする： ◎ If the cyclic dependency was introduced due to a block-size or max-block-size on the containing block that causes it to depend on the size of its contents, the box’s percentage is not resolved and instead behaves as auto.

  注記： `格子~駒$／`~flex駒$ は、この事例においても，百分率を解決できるようにしている。 ◎ Note: Grid items and flex items do allow percentages to resolve in this case.

• 他の場合の百分率は、包含塊の~sizeを基準に解決されるとする。 （包含塊の~sizeが，~boxの結果の~sizeに基づいて解決し直されることはないので、内容は，包含塊を ~overflow／~underflow するかもしれない）。 ◎ Otherwise, the percentage is resolved against the containing block’s size. (The containing block’s size is not re-resolved based on the resulting size of the box; the contents might thus overflow or underflow the containing block).

注記： これらの規則は、以前まで未定義であった CSS2, 10.2 節, CSS2, 8.3 節, CSS2, 8.4 節 における循環依存の事例の挙動を指定する。 また， CSS2, 10.5 節 による挙動は、 CSS2 では述べられてない~layout~mode（`~flex~layout$など）の仕様により~~上書きされることにも注意。 ◎ Note: These rules specify the previously-undefined behavior of this cyclic case in CSS2§10.2, CSS2§8.3, and CSS2§8.4. Note also, the behavior in CSS2§10.5 is superseded in their respective specifications for layout modes (such as flex layout) not described in CSS2.

<article style="width: `min-content$v">
  <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>