CSS ボックスサイズ法 — CSS Box Sizing Module Level 3

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日本語訳 共通~page＠~CSScommon#values$に移譲。 】

2.1. 自動~box~size

~CSSには、 自動的に決定される~size（`~autoS$v ~sizing規則による結果の~size）として， 次に挙げる 4 種がある（どれになるかは文脈に依存する）： ◎ 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$r `§ 10.3.5＠~CSS2J#float-width$ において “`available width^en （可用な横幅）” とも称されており， 同 `§ 10.3.3＠~CSS2J#blockwidth$ の規則により算出される。 ◎ 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の内容が~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$。 通例的には、［ `自動折返し機会$（ “非強制改行” ）は`~~採用しない^em下で，~boxの内容が~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 § 5 Intrinsic Size Determination.)

注記： これは、 `CSS2$r `§ 10.3.5＠~CSS2J#float-width$ においては “`preferred width^en（選好d横幅）” と称され， 同 `§ 17.5.2.2＠~CSS2TABLE#auto-table-layout$ においては “`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が生じないようにする下で， ~boxが占め得る最も小さい~size （それ以上狭めると~overflowする~size）。 正式には、［ ~boxが`最小-内容 拘束$の下で~sizeされたとき ］の~size — `§ 内在的~sizeの決定$を見よ。 ◎ Nominally, the smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size. Formally, the size of the box when sized under a min-content constraint, see § 5 Intrinsic Size Determination.

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

`行内-軸$における`最小-内容~size$。 概して，`自動折返し機会$を`すべて~~採用する^em下で、 内容が~boxに収まるときの`行内~size$。 ◎ The min-content size in the inline axis. Typically, the inline size that would fit around its contents if all soft wrap opportunities within the box were taken.

注記： これは、 `CSS2$r `§ 10.3.5＠~CSS2J#float-width$ においては “`preferred minimum width^en（選好d最小~横幅）” と称され， 同 `§ 17.5.2.2＠~CSS2TABLE#auto-table-layout$ においては “`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$。 ［ `塊~容器$／~table／`行内~box$ ］に対しては、 `最大-内容 塊~size$に等価になる。 ◎ The min-content size in the block axis. For block containers, tables, and inline boxes, this is equivalent to the max-content block size.

`内容が収まる~size@ （ `fit-content size^en ）

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

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

• 所与の軸に`可用な空間$が`確定的$な場合 ⇒ `max^op( `最小-内容~size$, `min^op( `最大-内容~size$, `伸張して収まる~size$ ) ) 【！clamp(min-content size, stretch-fit size, max-content size)】 ◎ If the available space in a given axis is definite, equal to clamp(min-content size, stretch-fit size, max-content size) (i.e. max(min-content size, min(max-content size, stretch-fit size))).＼
• `最小-内容 拘束$の下で~sizeしている場合 ⇒ `最小-内容~size$に等しい ◎ When sizing under a min-content constraint, equal to the min-content size.＼
• 他の場合 ⇒ `最大-内容~size$に等しい ◎ Otherwise, equal to the max-content size in that axis.

注記： これ【`内容が収まる行内~size$】は、［ `CSS2$r `§ 10.3.5＠~CSS2J#float-width$ ／ `CSS3COL$r § 3.4† ］においては， “`shrink-to-fit^en（収まるよう縮短した）” 横幅と称されている。

【† `過去~version＠~TR/2011/CR-css3-multicol-20110412/#pseudo-algorithm$においては。 `現在の~version＠~CSSMCOL#pseudo-algorithm$では、 `複-柱~容器$の “使用~幅” （使用~値としての`行内~size$）に相当する。 】

◎ Note: This is called the “shrink-to-fit” width in CSS2.1§10.3.5 and CSS Multi-column Layout § 3.4.

`内在的~size@ （ `intrinsic size^en ）

［ `最大-内容~size$／`最小-内容~size$ ］の総称。 すなわち、 首に内容の~sizeから~~決まる~size。 この用語は、 一部では［ 首に，これらいずれかの~sizeから導出される~size ］を指すときにも利用される。 ◎ A max-content size or min-content size, i.e. a size arising primarily from the size of the content. (Some uses of this term may refer also to sizes derived primarily from one of these two sizes.)

`置換され$る要素の`内在的~size$は、 その`生来な寸法$から導出されることが多い。 ◎ Replaced elements frequently derive their intrinsic size from their natural dimensions.

2.2. 内在的~size供与

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

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

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

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

`最大-内容 供与@ （ `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供与@ （ `intrinsic size contribution^en ）

［ `最大-内容 供与$／`最小-内容 供与$ ］の総称，あるいは、 内容に基づいて同様に計算される~size供与。 ◎ A max-content contribution, min-content contribution, or similarly-calculated content-based size contribution.

内在的~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.

`選好d縦横比@ （ `preferred aspect ratio^en ）

~boxに内来的な［ 横幅 : 縦幅 ］による比率。 様々な~sizing~algoは、 アリな限り，［ 他の入力を尊守しつつ，この縦横比と整合する~sizeを生産する ］よう仕向けられる。 ~boxの`選好d縦横比$は，他が指定されない限り、 ~boxに`生来な縦横比$があるならば それになり，その`内容~box$に適用される。 ほとんどの~boxには、 `選好d縦横比$は無い。 ◎ A width:height ratio inherent to a box, which biases various sizing algorithms to produce a size consistent with that aspect ratio insofar as possible while honoring other sizing inputs. Unless otherwise specified, a box’s preferred aspect ratio is its natural aspect ratio if it has one and is applied to its content box. Most boxes do not have a preferred aspect ratio.

3.1. 各種 ~sizing~prop

この節は、 各種 `~sizing~prop@ — `width$p, `height$p, `min-width$p, `min-height$p, `max-width$p, `max-height$p — を定義する。 これらがとり得る値は `§ ~sizingを与える値＠#sizing-values$ にて定義される。 ◎ 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 [0,∞]>, auto | none, min-content, max-content, and fit-content() values.

注記： これらの~propの`~flow相対$な各種 別名~propは、 `CSS-LOGICAL-1$r に定義される。 【`参照＠~CSSLOGICAL#dimension-properties$】 【これらも “`~sizing~prop$である” とされる。】 ◎ 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 に先送りされた。 この問題を解決する方法について示唆があれば歓迎する。 `論点＠https://github.com/w3c/csswg-drafts/issues/820$を見よ。 ◎ 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 [0,∞]$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@ を指定する。 これは、［ `塊~size$を指す場合には `自動的な塊~size@ ／ `行内~size$を指す場合には `自動的な行内~size@ ］とも称される。 これを計算する方法は、 関連な各種~layout~moduleを見よ。 ◎ For width/height, specifies an automatic size (automatic block size/automatic inline size). See the relevant layout module for how to calculate this.

［ `min-width$p ／ `min-height$p ］においては、 `自動的な最小~size@ を指定する — 加えて： ◎ For min-width/min-height, specifies an automatic minimum size.＼

• 使用~値は、 関連な~layout~moduleにより他が定義されない限り， `0^v に解決される。 ◎ Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0.＼
• `解決d値$は、 後方-互換性を得るため， `CSS2$r による`表示~型$の~box — 塊~box, 行内~box, 行内~塊, すべての~table~layout~box — に対しては 0 になるとする。 生成される~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. It also resolves to zero when no box is generated.

`none@v

~boxの~sizeは、 制限されない。 【すなわち，`最大~size$は無限大／`最小~size$は 0 】 ◎ No limit on the size of the box.

`min-content@v

関連な軸における`最小-内容~size$を利用する。 これは、 ~boxの`塊~size$用には — 他が指定されない限り — ~boxの`自動的~size$に等価になる。 ◎ Use the min-content size in the relevant axis; for a box’s block size, unless otherwise specified, this is equivalent to its automatic size.

`max-content@v

関連な軸における`最大-内容~size$を利用する。 これは、 ~boxの`塊~size$用には — 他が指定されない限り — ~boxの`自動的~size$に等価になる。 ◎ Use the max-content size in the relevant axis; for a box’s block size, unless otherwise specified, this is equivalent to its automatic size.

`~fit-contentLP@v

`可用な空間$を指定された引数に置換してから，`内容が収まる~size$用の公式を適用した結果 — すなわち，次の結果 — を利用する ⇒ `max^op( `min-content$v, `min^op( `max-content$v, `length-percentage$t ) ) 【！min(…, max(… 】 ◎ Use the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)),＼

この公式の `length-percentage^t 引数は、 `length-percentage^t 値を~~単体で与えたときと正確に同じに解決される。 ◎ where the <length-percentage> argument is resolved exactly as for <length-percentage> values standing alone.

負な `length-percentage$t 値は無効。 ◎ Negative <length-percentage> values are invalid.

`calc-size@f

`calc-size()＠~CSSVAL5#funcdef-calc-size$t を見よ。 ◎ See <calc-size()>.

注記： `calc-size$f の中では、 ~keyword `none$v は，利用-可能でない。 ◎ Note: The none keyword is not usable within calc-size().

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

注記： 次に挙げる値は、 ~level 3 による新たな値である ⇒＃ `min-content$v, `max-content$v, `fit-content$f, `calc-size$f【この訳による補完】 ◎ Note: The min-content, max-content, and fit-content() values are new in Level 3.

注記： これにより、 `flex-basis$p ~propも，これら新たな値をとり得ることになる — その値は <'`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 と同様に挙動するが，`選好d縦横比$があれば それを保全する）。 ◎ 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 preferred 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$r により指定される `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は，`負になれない＠#sizing-values$ので、 この計算は 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">この div は左半分を占めるべきである。</div>
<div class="split">この div は右半分を占めるべきである。</div>
</div>

注記： `button$e など，ある種の~HTML要素では、 `border-box$v の挙動が既定になる。 どの要素がこの挙動を備えるかの詳細は、 ~HTMLを見よ。 【参照：`~HTML~UA~stylesheet＠~HTMLrendering#the-css-user-agent-style-sheet-and-presentational-hints$】 ◎ 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の詳細＠~CSS2J#visudet$ における，これらの用語の明示的な一義化については、 `CSS-UI-3$r `§ ~box~modelの変更-法＠~TR/css-ui-3/#box-sizing$ （ `box-sizing^p ~prop） を見よ†。 ◎ Refer to CSS User Interface 3 § 4.1 Changing the Box Model: the box-sizing property for an explicit disambiguation of these terms for the Visual formatting model details section of [CSS2].

【† 要約すると， `border-box$v の場合には、［ § 視覚-整形~modelの詳細 にて定義される各種~sizingの公式において，それらの用語を指している値（各種 `~sizing~prop$の指定d値） ］は，［ 予め~border, ~paddingを減算して 0 以上に切上げた結果 ］と見做される。 】

仕様~策定者は、 横幅や縦幅などの用語の利用が多義的になるのを避けるべきである — 各~事例ごとに 適切に［ `内縁~size$ ／ `外縁~size$ ／ `~border~box$の~size ／ `~sizing~prop$の`算出d値$ ／ 等々 ］を明示的に指すように~linkして。 ◎ To avoid ambiguities, specification authors should avoid ambiguous uses of terms such as width or height without further qualification, and should explicitly 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を与える新たな値

【 原文には， `fit-content()^v の引数を成す `length-percentage^t に範囲が指定されていないが、 `column-width^p の値~定義と整合するためには，必要になろう。 】

`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

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

【 原文には [0,∞] が無いが， `width$p と同様に必要になろう。 】

注記： 柱~幅は、 柱ごとに変わることは決してない。 柱~幅が（上で与えた~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. 百分率による~sizing

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

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

`包含塊$の~sizeが その内容の~sizeに依存するとき，百分率を解決する方法の詳細は、 `§ 百分率で~sizeされた~boxの内在的~供与＠#cyclic-percentage-contribution$ を見よ。 ◎ See § 5.2.1 Intrinsic Contributions of Percentage-Sized Boxes for details on how to resolve percentages when the size of the containing block depends on the size of its content.

5.1. 内在的~size

各~軸に対し — 以下， “~size” は、 その軸における~sizeを表す — ~boxの［ `最小-内容~size$／`最大-内容~size$ ］は、 `浮動体$が［ ~size 0 の ／ ~size無限な ］包含塊~内で， その`選好d~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 preferred 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”.) ◎ The max-content size of a box in each axis is the size it would have if it was a float given an auto preferred 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”.)

［ `最小-内容~size$／`最大-内容~size$ ］は、 `内在的~size$と総称される。 ◎ The min-content size and max-content size are collectively referred to as the intrinsic sizes.

注記： ~boxに`選好d縦横比$がある場合、 一方の次元における~size拘束が もう一方に転換され， ~boxの `~autoS$v ~sizeに影響し得ることに注意。 `CSS2$r `§ 置換d要素の~sizing＠~CSS2J#replaced-size$ を見よ。 ◎ Note: When the box has a preferred 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を決定する方法は，定義しない。 `CSS2$r を参照rされたし。 しかしながら，［ `置換され$る要素のうち，`生来な~size$を伴わないもの ］の`内在的~size$は、 以下に定義される： ◎ This specification does not define how to determine the sizes of floats. Please refer to [CSS2]. However, the intrinsic sizes of replaced elements without natural sizes are defined below:

~boxは`選好d縦横比$を伴う場合： ◎ If it has a preferred aspect ratio:

`最小-内容~size$には 0 を利用する。 ◎ For the min-content size, use zero.

`最大-内容~size$には： ◎ For the max-content size:

• `行内-軸$における`可用な空間$は`確定的$である場合、 その~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 ］の`算出d値$のうち：

  • 片方だけ `length$t ならば、 その~sizeを利用した上で， 他方の次元は 縦横比を利用して計算する。
  • 両方とも `length$t ならば、 各~次元ごとに前項と同様に計算した上で， 結果が大きくなる方を選ぶ。

  ◎ Otherwise if the box has a <length> as its computed value for min-width or min-height, use that size and calculate the other dimension using the aspect ratio; if both dimensions have a <length> minimum, choose the one that results in the larger overall size.

  注記： この事例は，以前は、 ~boxの `min-^p ~sizeではなく， 既定~size 300 × 150 から計算されていた。 こうした方がより良く挙動するものと予見され， ~Web互換になるものと見込まれるが、 問題があれば~CSS~WGまで~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.

• 他の場合、 `行内~size$には［ `初期~包含塊$の対応する次元の~size ］を利用し， 他方の次元は縦横比を利用して計算する。 ◎ Otherwise use an inline size matching the corresponding dimension of the initial containing block and calculate the other dimension using the aspect ratio.

~boxは`選好d縦横比$を伴わない場合： ◎ If it has no preferred aspect ratio:

［ `最小-内容~size$, `最大-内容~size$ ］どちらも： ◎ For both the min-content size and max-content size:

• 当の次元における~boxの`最小~size$ （ `min-width$p ／ `min-height$p ） の`算出d値$は `length$t になるならば、 その~sizeを利用する。 ◎ If the box has a <length> as its computed minimum size (min-width/min-height) in that dimension, use that size.

  注記： この［ 作者が制御-可能な挙動 ］は、 `最小~size~prop$用の新たな値 `~autoS$v によりアリになった。 これは，より良い挙動を与えるものと予見されているが、 ~Web互換かどうかは，まだ明瞭でない — 問題があるなら，~CSS~WGに~feedbackを送信されたし。 ◎ Note: This author-controllable behavior is made possible by the new auto value for the min size properties. This is believed to be a better behavior, but it is not yet clear if it is Web-compatible, so please send feedback to the CSSWG if there are any problems.

• 他の場合、 当の次元が［ 横幅ならば `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$r `§ 10.3.2＠~CSS2J#inline-replaced-width$ ）、 この仕様は，未定義であった［ `置換され$る要素が［ `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仕様, あるいは既存の実装を参照rされたし。 将来の仕様は、 ~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は、 ~form~controlのうち［ 自身の値を［ 自身の~boxの中に包含される~text ］として描画するもの ］に対しては，内容に基づく~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 の事例では その`生の値＠~HEforms#concept-textarea-raw-value$ ／ `input$e の事例では その`値＠~HTMLforms#concept-fe-value$） になるものと定義され，入力~controlの子である`~text連列$として扱われる — 場合によっては［ よりヒトが読み易い／地域化された ］表示~形式に形式変換された上で、 入力~controlに対し （ ~CSS~propや, ~UAに内部的な他の拘束に基づいて） 実際に折返ngが許容される所に限り，`自動折返し機会$を許容するように。 入力~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 sequences 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$に対し — ［ ~caretに足る空間を確保する, あるいは~form~controlの利用-能を保守する ］ためとして — 何らかの最小を施行してもヨイ （ 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 その他の［ `置換され$る, かつ内容を包含している要素 ］にまで拡張され得る （`論点＠~CSSissue/1771$を見よ）。 が、 ~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.

5.2. 内在的~供与

各~軸における，~boxの［ `最小-内容 供与$／`最大-内容 供与$ ］は、［ 次のような`浮動体$が在ったとするとき ］の［ 浮動体の`内容~box$の~size ］になる ⇒ ［ 当の~boxのみを包含している ］~AND［ `~autoS$v により~sizeされている ］~AND［ `包含塊$の~sizeは［ 0 ／無限 ］（同順）］ ◎ 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を決定する方法は精確に定義しない。 詳細は、 次を参照rされたし ⇒＃ `CSS2$r ／ その【当の~boxの】`表示~型$に関連な各種~CSS仕様 ／ `百分率の取扱い規則＠#percentage-sizing$（下に述べる）／ 既存の実装 ◎ 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.

<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>

X.1. 内在的な縦横比： `aspect-ratio^p ~prop

この~propは、 ~boxの`選好d縦横比$を設定する。 それは、 `~autoS$v ~sizeの計算や一部の~layout関数に利用されることになる。 ◎ This property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

`~autoR@v

`生来な縦横比$を伴う`置換され$る要素は、 その縦横比を【~boxの`選好d縦横比$に】利用する。 他の場合、 ~boxの`選好d縦横比$は無い。 この縦横比を孕んでいる~size計算は、 常に`内容~box$の寸法とともに働く†。 ◎ Replaced elements with a natural aspect ratio use that aspect ratio; otherwise the box has no preferred aspect ratio. Size calculations involving the aspect ratio work with the content box dimensions always.

【† `box-sizing$p に `border-box$v が指定された場合でも、 `~border~box$ではなく`内容~box$の縦横比として扱われることになる。 】

`ratio$t

~boxの`選好d縦横比$は、 指定された比率（横幅 ~DIV 縦幅）になる。 この縦横比を孕んでいる~size計算は、 常に， `box-sizing$p が指定する~boxの寸法とともに働く。 ◎ The box’s preferred aspect ratio is the specified ratio of width / height. Size calculations involving the aspect ratio work with the dimensions of the box specified by box-sizing.

`ratio$t は`退化な比率$である場合、 この~propは，代わりに `~autoR$v として挙動する。 ◎ If the <ratio> is degenerate, the property instead behaves as auto.

`auto^v && `ratio$t

`~autoR$v と `ratio$t が一緒に指定された場合， `選好d縦横比$は指定された比率（横幅 ~DIV 縦幅）になるが、 `置換され$る要素である事例では，その`生来な縦横比$が代わりに利用される。 いずれの事例でも，この縦横比を孕んでいる~size計算は、 常に，`内容~box$の寸法とともに働く。 ◎ If both auto and a <ratio> are specified together, the preferred aspect ratio is the specified ratio of width / height unless it is a replaced element with a natural aspect ratio, in which case that aspect ratio is used instead. In all cases, size calculations involving this aspect ratio work with the content box dimensions always.

`ratio$t は`退化な比率$である場合、 この~propは，代わりに `~autoR$v として挙動する。 ◎ If the <ratio> is degenerate, the property instead behaves as auto.

注記： `選好d縦横比$を伴わせることは、 ~boxを`置換され$る要素にするものではない。 `置換され$る要素に特有な~layout規則は、 一般に，`選好d縦横比$を伴う~boxには適用されない。 例えば，`置換され$ない, かつ`絶対的に位置され$た~boxは、 `選好d縦横比$を伴う場合でも， `justify-self$p に指定された `normal^v を `start$v ではなく `~stretchJS$v として扱う （ `CSS-ALIGN-3$r `§ 絶対的に位置された~box＠~CSSALIGN#justify-abspos$ ）。 ◎ Note: Having a preferred aspect ratio does not make a box into a replaced element; layout rules specific to replaced elements do not generally apply to non-replaced boxes with a preferred aspect ratio. For example, a non-replaced absolutely-positioned box treats justify-self: normal as stretch, not as start (CSS Box Alignment 3 § 6.1.2 Absolutely-Positioned Boxes), even if it has a preferred aspect ratio

~CSS2は、［ 置換される要素と縦横比を伴う要素 ］を明瞭に相違~化していなかった。 不明瞭な特定の事例を — ~level 3 仕様か ここか，適切な方で — 洗い出して，定義する必要がある。 ◎ CSS2.1 does not cleanly differentiate between replaced elements vs. elements with an aspect ratio; need to figure out specific cases that are unclear and define them, either in the appropriate Level 3 spec or here.

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

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

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

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

`置換され$る要素が その`生来な寸法$として［ `生来な横幅$, `生来な縦幅$ ］のうち片方しか有さない下で，要素に`選好d縦横比$を与えた場合、［ その片方を`選好d縦横比$を通して転換した結果 ］がもう片方を与える。 ◎ If a replaced element’s only natural dimension is a natural width or a natural height, giving it a preferred aspect ratio also gives it an natural height or width, whichever was missing, by transferring the existing size through the preferred aspect ratio.

X.2. 自動的~sizeに対する選好d縦横比による効果

~boxが`選好d縦横比$を有する場合、 ~boxの`自動的~size$は，［ `生来な縦横比$を有する, かつ その軸において`生来な~size$は無い`置換され$る要素 ］と同じに計算される — 例： `CSS2$r `§ 10＠~CSS2J#visudet$, ~flex~layoutの `§ 行f長さの決定＠~CSSFLEX#algo-main-item$ を見よ。 `縦横比に依存する軸@ （ `ratio-dependent axis^en ）とは、 `選好d~size$の計算が`選好d縦横比$に依存する方の軸を指す — その入力~sizeが`確定的$ならば、 結果の~sizeも`確定的$になる。 他方の軸が， `縦横比に依存しない軸@ （ `ratio-determining axis^en ）になる （`縦横比に依存する軸$における~sizeは、 この軸における~sizeに依存する）。 ◎ When a box has a preferred aspect ratio, its automatic sizes are calculated the same as for a replaced element with a natural aspect ratio and no natural size in that axis, see e.g. CSS2 § 10 and CSS Flexible Box Model Level 1 § 9.2. The axis in which the preferred size calculation depends on this aspect ratio is called the ratio-dependent axis, and the resulting size is definite if its input sizes are also definite. The opposite axis (on which the ratio-dependent axis size depends) is the ratio-determining axis.

注記： ~boxの`選好d縦横比$は、 その［ `width$p, `height$p ］のうち どちらかが`自動的~size$である場合に限り， ~boxの【他方の】`選好d~size$に対する効果がある — どちらもそうでない場合、 効果は無い。 ◎ Note: A preferred aspect ratio only ever has an effect if at least one of the box’s sizes is automatic. If neither width nor height is an automatic size, it can have no effect on its preferred sizes.

すべての~sizing情報をここに移動したなら — `, rather than crowbar-ing our way into 2.1^en【？】 — ここでの中核~原則は、 `縦横比に依存しない軸$に対し （［ 最小-／最大- ］拘束を適用する前に） 解決された`選好d~size$は，比率を通して転換するだけになる。 ［ 最小-／最大- ］拘束は、 その後に転換され，縦横比を問わず各~軸に独立に適用される。 ◎ When we move all the sizing information here, rather than crowbar-ing our way into 2.1, then the core principle here is just: the resolved preferred size in the ratio-determining axis (before applying min/max) gets transferred thru the ratio. Min/max constraints get transferred afterwards, and then applied to each axis independently without regards to aspect-ratio.

X.3. 内容に基づく自動的な最小~size

意図的でない~overflowを避けるためには、 `選好d縦横比$を伴う~boxのうち［ `置換され$ない, かつ`~scroll容器$でないもの ］の`縦横比に依存する軸$における`自動的な最小~size$は、 ~boxの`最小-内容~size$を~boxの`最大~size$以下に抑えた結果になる。 ◎ In order to avoid unintentional overflow, the automatic minimum size in the ratio-dependent axis of a box with a preferred aspect ratio that is neither a replaced element nor a scroll container is its min-content size capped by its maximum size.

div {
  aspect-ratio: 1/1;
  /* 
`width^p, `height^p どちらも既定では `auto^v
◎
'width' and 'height' both default to 'auto'
 */
}

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

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

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

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

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

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

X.4. 最小-／最大-~sizeの転換-法

~boxに対する一方の軸 %元-軸 における~sizingの拘束は、 次に従って`選好d縦横比$を通して転換され，他方の軸 %行先~軸 における`不定$な［ `最小~size$／`最大~size$／`選好d~size$ ］に適用される： ◎ Sizing constraints in either axis (the origin axis) are transferred through the preferred aspect ratio and applied to any indefinite minimum, maximum, or preferred size in the other axis (the destination axis) as follows:

• %元-軸 における`最小~size$は`確定的$ならば，それは ⇒ `選好d縦横比$を通して %行先~軸 における~sizeに変換され、 その結果は ⇒ %行先~軸 における`選好d~size$は`確定的$ならば，それ以下に抑えられ、 さらに ⇒ %行先~軸 における`最大~size$は`確定的$ならば，それ以下に抑えられる。 ◎ First, any definite minimum size is converted and transferred from the origin to destination axis. This transferred minimum is capped by any definite preferred or maximum size in the destination axis.
• %元-軸 における`最大~size$は`確定的$ならば，それは ⇒ `選好d縦横比$を通して %行先~軸 における~sizeに変換され、 その結果は ⇒ %行先~軸 における`選好d~size$は`確定的$ならば，それ以下に抑えられ、 さらに ⇒ %行先~軸 における`最大~size$は`確定的$ならば，それ以下に抑えられる。 ◎ Then, any definite maximum size is converted and transferred from the origin to destination. This transferred maximum is floored by any definite preferred or minimum size in the destination axis as well as by the transferred minimum, if any.

注記： したがって，他方の軸（ %行先~軸 ）における確定的な~sizeは、 他方の軸へ転換された拘束には，まったく影響されない。 転換された最小~sizeは、 要素を その確定的な［ 選好d~size／最大~size ］を超過させることは決してない／ 転換された最大~sizeは，要素を その［ 選好d~size／最小~size ］に違反させることは決してない。 ◎ Note: Thus, any definite sizes are completely unaffected by a transferred constraint; and a transferred minimum will never cause an element to exceed a definite preferred/maximum size, nor will a transferred maximum cause an element to violate its preferred/minimum size.

注記： ［ ~sizingの拘束を縦横比を通して他方の軸へ転換する ］ときの基本的な原則は、 他方の軸に明示的に指定された~sizeに違反しない限り， できるだけ自身の縦横比を保全することにある。 （ `CSS2$r `§ 縦横比を伴う~size不定な置換d要素に対する最大, 最小~sizeの適用-法＠~CSS2J#min-max-replaced-size$ 【！~CSS2J#min-max-widths】は、 この原則に基づく。） ◎ Note: The basic principle is that sizing constraints transfer through the aspect-ratio to the other side to preserve the aspect ratio to the extent that they can without violating any sizes specified explicitly on that affected axis. (This is the principle that drove the contents of the constraint table in CSS2 Section 10.4.)

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

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

この節は、 正しく書かれてないかもしれない [`6071$issue]。 ◎ This section might not be written correctly. [Issue #6071]

近過去の変更点

`2020年 12 月 18日 作業草案＠~TR/2020/WD-css-sizing-3-20201218/$ からの変更点： ◎ Changes since the 18 December 2020 Working Draft include:

【 ここに記された内容は、 明らかに~level 4 の変更点なので，和訳は省略する （誤って この~level 3 に記されたと見受けられる）。 】

◎ Fixed the order of contain-intrinsic size values when auto is combined with other values so that parsing is unambiguous. (Issue 6391) ◎ Clarified which elements are allowed to not have a last remembered size for contain-intrinsic-size: auto. (Issue 6220) ◎ Limited contain-intrinsic-size: auto to when content-visibility' is content-visibility/auto''. (Issue 6308)

`2020年 12 月 18日 作業草案＠~TR/2020/WD-css-sizing-3-20201218/$ からの変更点： ◎ Recent Changes ◎ Changes since the 18 December 2020 Working Draft include:

`§ 内在的~size＠#intrinsic-sizes$ における［ 置換d要素の最大-内容~sizeの定義 ］における様々な誤りを修正した。 （ `6072$issue ） ◎ Fixed various errors in definition of max-content sizes of replaced elements in § 5.1 Intrinsic Sizes. (Issue 6072)

`内容が収まる~size$の定義に，欠落った［ `最小-内容 拘束$を取扱うための言明 ］を追加した。 ◎ Added missing statement handling min-content constraint to definition of fit-content size.

`内在的~size$との混同を避けるため、 置換d要素の “内在的” 寸法を “生来な” 寸法に改称した。 （ `4961$issue ） ◎ Renamed replaced element “intrinsic” dimensions to “natural” dimensions in order to avoid confusion with intrinsic sizes (see Issue 4961).

様々な他の小さな編集上の修正点と改善。 ◎ Various other minor editorial fixes and improvements.

`2019年 5月 22日 作業草案＠~TR/2019/WD-css-sizing-3-20190522/$ からの主な変更点は： ◎ Major changes since the 22 May 2019 Working Draft include:

［ `min-content$v ／ `max-content$v ］は、 （関連な~layout~moduleにより）他が指定された場合には［ 当の~propの初期~値と同じに挙動するとは限らない ］ものと定義した。 （ `3973$issue ） ◎ Defined that min-content and max-content do not necessarily behave the same as the property’s initial value if otherwise specified (by the relevant layout module). (Issue 3973)

`fit-content$f による内在的~供与を計算するときには、 その解決~用に特別な挙動を与えるのではなく，［ その引数を それ~~単体で与えたときと同じに扱う下で， `内容が収まる~size$用の公式を解決する ］よう切替えた。 （ `3731$issue ） ◎ Switched intrinsic contribution of fit-content() to treat its argument as that argument would be treated alone for intrinsic contribution calculations and resolve the fit-content formula accordingly, rather than having special behavior for fit-content() resolution when calculating intrinsic contributions. (Issue 3731)

`置換され$る~boxが`内在的~size$を伴わない場合、 ~boxの`最大-内容~size$には［［ 初期~包含塊の~size ／ `300px^v × `150px^v ］に代えて，~boxの`最小~size$を — それが `length$t の場合に限り — 利用する ］よう変更した。 `§ 内在的~size＠#intrinsic-sizes$ を見よ。 （ `4217$issue ） ◎ Changed the max-content size of replaced boxes without an intrinsic size to use their minimum size in place of ICB or 300px×150px only when it is a <length>, see § 5.1 Intrinsic Sizes. (Issue 4217)

生来な縦横比を伴う~objに対する既定の~sizingを［ `300px^v × `150px^v に代えて，初期~包含塊の~sizeを利用する ］よう切替えた。 （ `4218$issue ） ◎ Switched default sizing of an object with a natural aspect ratio to use the ICB size instead of 300px×150px. (Issue 4218)

`選好d縦横比$を定義した。 適切な所では、 “内在的~縦横比” 【`生来な縦横比$の旧称】に代えて，それを利用した。 ◎ Defined preferred aspect ratio and used it in place of “intrinsic aspect ratio” where appropriate.

諸々の［ 小さな／編集上の ］修正s。 ◎ Miscellaneous minor / editorial fixes.

`2018年 3月 4日 作業草案＠~TR/2018/WD-css-sizing-3-20180304/$ からの主な変更点は： ◎ Major changes since the 4 March 2018 Working Draft include:

`box-sizing$p の定義を `CSS UI ~level 3＠~TR/css-ui-3/$ から取込んだ。 ◎ Imported the box-sizing definition from CSS UI Level 3.

`循環な百分率$の取扱いを，より厳格に指定した。 （ `1132$issue, `2384$issue, `2297$issue, `2674$issue ） ◎ More rigorously specified handling of cyclic percentages. (#1132, #2384, #2297, #2674)

塊~軸に適用される各種 `*-content^v 値は、 ~propの初期~値に算出されることなく， ~propの初期~値として “挙動する” ように変更した。 （ `2708$issue ） ◎ Changed the *-content values applied to the bock axis to not compute to the property’s initial value, but to rather “behave as” the property’s initial value. (#2708)

諸々の自明な誤りを修正した。 ◎ Fixed miscellaneous trivial errors.

`2017年 2月 7日 作業草案＠~TR/2017/WD-css-sizing-3-20170207/$ からの主な変更点は： ◎ Major changes since the 7 February 2017 Working Draft include:

置換される要素~用の［ `最小-内容~size$ ／ `最大-内容~size$ ］の定義を，もっと正確aにした。 ◎ More accurate definition of min-content and max-content sizes for replaced elements.

新たな~keywordは、 `塊-軸$に適用されるときは初期~値に算出されることにした — 存在しないこともある `~autoS$v ではなく。 ◎ Compute new keywords to the initial value, not to a potentially non-existent auto, when applied to the block axis.

置換される要素~上の百分率~sizeによる`最小-内容 供与$は、 0 化するよう指定した。 ◎ Specify that percent sizes on replaced elements zero out their min-content contribution.

［ ~sizeが内容に依存する包含塊 ］を基準に解決される百分率~sizeの［ 紛らわしい／間違った ］定義を修正した （これには、もっと作業が要求されよう）。 ◎ Fix confusing/wrong definition of percentage sizes resolved against a dependent containing block. (This may require further work.)

~keyword `stretch$v, `fit-content$v は、［ 包含塊が`不定$なときの挙動 ］をもっと~~深く考慮できるよう，~level 4 に先送りした。 ◎ Deferred the stretch and fit-content keywords to Level 4 to allow for further consideration of their behavior in indefinite containing blocks.

［ 次に挙げる，すべての~sizing~prop ］用の全部的な定義を取り込んだ（~~差分ではなく） ⇒＃ `width$p, `height$p, `min-width$p, `min-height$p, `max-width$p, `max-height$p, `box-sizing$p ◎ Pulled in full definitions for all of the sizing properties (rather than diffing them): width, height, min-width, min-height, max-width', max-height, and box-sizing.

~CSS~level 2 からの追加

様々な［ 自動的な／内容に基づく ］~sizing~algoに対する相当な詳細に加え、 次に挙げる新たな特能が `CSS2$r 以降に追加された： ◎ In addition to substantially more detail to the various automatic and content-based sizing algorithms, the following new features have been added since [CSS2]:

• `box-sizing$p ~prop （元々は `CSS-UI-3$r にて定義されていたが、ここに移動された）。 ◎ The box-sizing property (originally defined in [CSS-UI-3], then moved here).
• 各種`~sizing~prop$用の次に挙げる値 ⇒＃ `min-content$v, `max-content$v, `fit-content$f ◎ The min-content, max-content, and fit-content() values of the sizing properties.
• ［ `min-width$p ／ `min-height$p ］~prop用の初期~値 `~autoS$v （元々は `CSS-FLEXBOX-1$r にて定義されていたが、ここに移動された）。 ◎ The auto initial value of the min-width and min-height properties (originally defined in [CSS-FLEXBOX-1], then moved here).