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

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]

1.2. 値~定義

【 この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】

3.1. 各種~sizing~prop

`~level 3$ `§ 各種~sizing~prop＠~SIZING#sizing-properties$ を統合する。 ◎ CSS Sizing 3 § 3.1 Sizing Properties

`size$p ~propは、［ `width$p, `height$p ］を単独の宣言で設定する`略式~prop$である。 2 個目の値が省略された場合、 1 個目の値から複製される。 ◎ The size property is a shorthand that sets width and height in a single declaration. If the second value is omitted, it is copied from the first.

`size$p 略式~propは、 `page$at 文脈においては利用できない — `page^at には、 すでに無関係な `size$d 記述子が，~page~sizeの設定~用に有るので。 ◎ The size shorthand cannot be used in @page contexts, as @page already has an unrelated size descriptor for setting the page size.

`size$p ~propは、 互換性の問題と`page$at との競合を避けるため， `選好される略式~propの順序$ `CSSOM-1$r からは省略される必要がある。 ◎ The size property needs to be omitted from the preferred shorthand order in CSSOM, to avoid compat problems and conflicts with @page.

`min-size$p ~propは、［ `min-width$p, `min-height$p ］を単独の宣言で設定する`略式~prop$である。 2 個目の値が省略された場合、 1 個目の値から複製される。 ◎ The min-size property is a shorthand that sets min-width and min-height in a single declaration. If the second value is omitted, it is copied from the first.

`max-size$p ~propは、［ `max-width$p, `max-height$p ］を単独の宣言で設定する`略式~prop$である。 2 個目の値が省略された場合、 1 個目の値から複製される。 ◎ The max-size property is a shorthand that sets max-width and max-height in a single declaration. If the second value is omitted, it is copied from the first.

3.2. 新たな~sizing値： `contain^v, `stretch^f, `fit-content^f, `calc-size^f

`~level 3$ `§ ~sizingを与える値＠~SIZING#sizing-values$ を統合する。 ◎ Integrate CSS Sizing 3 § 3.2 Sizing Values: the <length-percentage>, auto | none, stretch, min-content, max-content, and fit-content values

~level 4 は、 `~sizing~prop$において［ `contain$v, `fit-content$f, `calc-size$f ］を利用する能を追加する — したがって、 `box-size$t 生成規則を次のとおり拡げる： ◎ Level 4 adds the ability to use the contain, fit-content(), and calc-size() values in the sizing properties, thus expanding the <box-size> production as follows:

`box-size@t
	= `length-percentage$t
	| `stretch$v
	| `contain$v
	| `min-content$v
	| `max-content$v
	| `fit-content$v
	| `stretch()$t
	| `fit-content()$t
	| `calc-size()$t

`stretch()@t = stretch(`length-percentage [0,∞]$t)

`~margin~box$が引数により指定された~sizeに収まるようにする。 この目的においては、 `auto^v `~margin$を 0 として扱うことに加え，~marginを［ 抑止する／切落とす ］効果 — `~margin相殺$, `margin-trim$p, その他 — を無視する。 ◎ Fit the margin box to the size specified by the argument. For this purpose, treat auto margins as zero, and ignore margin collapsing, margin-trim, and other effects that suppress or truncate the margin.

注記： この~sizeを計算する目的においては，~margin相殺, 等々は無視されるが、 それらの効果は，他においては抑止されることなく通例通り適用される。 ◎ Note: Although margin collapsing, etc. are ignored for the purpose of calculating this size, their effects are not otherwise suppressed, and apply as usual.

引数 `length-percentage$t は、 この値に代えて引数~自体が指定されたときと正確に同じに解決される。 ◎ The <length-percentage> argument is resolved exactly as for <length-percentage> values standing alone.

ここでの~open論点に関する詳細は、 `5715$issue にある。 ◎ Open discussion wrt details here. [Issue #5715]

`fit-content()@t = fit-content(`length-percentage [0,∞]$t)

`fit-content$v 用の公式を［ `可用な空間$を指定する引数【すなわち， `stretch$v 】 ］を `stretch$f に置換した上で利用する。 すなわち，次の結果になる ⇒ `min^op( `max-content$v, `max^op( `min-content$v, `stretch( 指定された引数 )^v ) ◎ Use the fit-content formula with the available space replaced by stretch() into the specified argument, i.e. min(max-content, max(min-content, stretch(<length-percentage>)).

`contain@v

当の~boxに`選好d縦横比$が： ◎ ↓

• 有る場合 ⇒ `§ 包含して収まる~sizing＠#contain-fit-sizing$ を適用して，アリな限り~boxの`選好d縦横比$を保守しながら~boxの拘束に収まるよう試みる。 ◎ If the box has a preferred aspect ratio, applies contain-fit sizing, attempting to fit into the box’s constraints while maintaining its preferred aspect ratio insofar as possible. See § 6.1 Contain-fit Sizing: stretching while maintaining an aspect ratio.
• 無い場合 ⇒ `伸張して収まる~size$を適用する。 ◎ If the box has no preferred aspect ratio, applies stretch-fit sizing.

`calc-size()$t

`§ 内在的~sizeを伴う計算-法＠#calc-size$ を見よ。 ◎ See § 7 Calculating With Intrinsic Sizes: the calc-size() function.

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

注記： これらの新たな値は、 `calc-size$f の定義が “当の文脈において許容される” ものとして参照rする値たちが成す集合【すなわち， `size-keyword$t 】に追加される。 ◎ Note: These new values add to the set of values that the definition of <calc-size()> refers to as “allowed in the context”.

4.1. 選好d縦横比： `aspect-ratio^p ~prop

この~propは、 ~boxの `選好d縦横比@ を設定する。 それは、 `auto$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.

`auto@v1

`生来な縦横比$を伴う`置換され$る要素は、 その縦横比を【~boxの`選好d縦横比$に】利用する。 他の場合、 ~boxの`選好d縦横比$は無い。 この縦横比を孕んでいる~size計算は、 常に`内容~box$の寸法とともに働く~FN。 ◎ 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.

【~FN `box-sizing$p に `border-box＠~CSSBOX#valdef-box-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は，代わりに `auto$v1 として挙動する。 ◎ If the <ratio> is degenerate, the property instead behaves as auto.

`auto$v1 && `ratio$t

`auto$v1 と `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 the aspect ratio work with the content box dimensions always.

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

注記： `選好d縦横比$を伴わせることは、 ~boxを`置換され$る要素にするものではない。 `置換され$る要素に特有な~layout規則は、 一般に，`選好d縦横比$を伴う~boxには適用されない。 例えば，`置換され$ない, かつ`絶対的に位置され$た~boxは、 `選好d縦横比$を伴う場合でも， `justify-self$p に指定された `normal^v を `start＠~CSSALIGN#valdef-self-position-start$v ではなく `stretch＠~CSSALIGN#valdef-justify-self-stretch$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$r は、［ 置換される要素と縦横比を伴う要素 ］を明瞭に相違~化していなかった。 不明瞭な特定の事例を — `~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.

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

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

意図的でない~overflowを避けるため、［ `選好d縦横比$を伴う~box %~box の`縦横比に依存する軸$ %軸 における`自動的な最小~size$ ］は，［ %~box は`置換され$る要素でない ］~AND［ %軸 は`~scroll容器$の`~scroll可能な軸$でない ］場合には［ %~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 in that axis, 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>

4.4. 最小-~size／最大-~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:

1. %元-軸 における`最小~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.
2. %元-軸 における`最大~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]

5.1. 内在的~size

`~level 3$ `§ 内在的~size＠~SIZING#intrinsic-sizes$ を統合する。 ◎ CSS Sizing 3 § 5.1 Intrinsic Sizes

5.2. 封込まれた内在的~sizeの上書き法：各種 `contain-intrinsic-*^p ~prop

これらの~propは、［ `~size封込め$を伴う要素に 【各~軸において】 `明示的な内在的~内縁~size@ を指定すること ］を許容する。 それにより、 当の~boxは，［ その`~flow内$には、 全体の［ 横幅／縦幅 ］が指定された`明示的な内在的~内縁~size$に合致している内容が在る ］かのように~sizeされる （【既定では，】空であったかのように~sizeされる代わりに）。 ◎ These properties allow elements with size containment to specify an explicit intrinsic inner size, causing the box to size as if its in-flow content totals to a width and height matching the specified explicit intrinsic inner size (rather than sizing as if it were empty).

注記： これは、［ 要素~内には、 指定された`明示的な内在的~内縁~size$を伴う子が 1 個だけ在る ］かのように~lay-outとするときと，常に等価になるとは限らない。 例えば，ある`格子~容器$内に指定された~sizeを伴う子が 1 個だけ在る場合でも、 指定された格子に則って~sizeすることになる — 結果の内容~sizeは、 通例的に，指定された~sizeより大きくなる。 ◎ Note: This is not always equivalent to laying out as if the element had one child of the specified explicit intrinsic inner size. For example, a grid container with one child of the specified size would still size according to the specified grid, usually ending up with a larger content size than specified.

以下の記述における各種~sizeは、 当の~propが対象にする軸 （例： `contain-intrinsic-block-size$p ならば`塊-軸$） における~sizeを指すとする： ◎ ↓

`none@v1 | `length$t

当の要素の`明示的な内在的~内縁~size$は ⇒ それを供している `contain-intrinsic-size$p 値（ `auto$v1 など）は他に無いならば ⇒＃ `none$v1 が指定された場合は無い／ `length$t が指定された場合はそれになる。 ◎ If no other contain-intrinsic-size value (such as auto) is providing an explicit intrinsic inner size, the corresponding axis either doesn’t have an explicit intrinsic inner size (if none is specified) or has an explicit intrinsic inner size of the specified <length>.

`auto@v1

当の要素の`明示的な内在的~内縁~size$は ⇒ 当の要素の`内容は飛ばされて＠~CSSCONTAIN#skips-its-contents$いるならば ⇒ 当の要素が`最後に記憶した~size$ ~NEQ ε ならば それになる。 ◎ If auto is specified and the element has a last remembered size and is currently skipping its contents, its explicit intrinsic inner size in the corresponding axis is the last remembered size in that axis.

注記： これは、 例えば，当の要素が次を満たすときに生じる ⇒ ［ その `content-visibility$p ~EQ `auto^v ］~AND［ ~screen外にある ］ ◎ Note: This occurs, for example, when an element with content-visibility: auto is off-screen.

所与の要素が［ ある軸において`明示的な内在的~内縁~size$を有する ］場合、 当の要素を`~size封込め$用に通常通り~lay-outした後において，［ 当の要素を成す内容の当の軸における~sizeは、 ~layoutにて計算された結果に代えて， `明示的な内在的~内縁~size$になる ］ものと扱われ，必要yなら~layoutを再び遂行する。 （両~軸において`明示的な内在的~内縁~size$を有する場合、 このことは，最初の~layoutを飛ばせることを含意する。） ◎ If an element has an explicit intrinsic inner size in an axis, then after laying out the element as normal for size containment, the size of the contents in that axis are instead treated as being the explicit intrinsic inner size instead of what was calculated in layout, and layout is performed again if necessary. (If it has an explicit intrinsic inner size in both axises, this implies the first layout can be skipped.)

これら 4 種の~propは、 `論理-~prop~group$の一部を成す。 ◎ These four properties are part of a logical property group.

注記： `~size封込め$ `CSS-CONTAIN-1$r を伴う要素は、 内容が無かったかのように~lay-outされ、 要素の`内縁~縦幅$は，多くの事例で 0 に畳まれることになる。 これは，［ 期待される内容を示すよう選ばれた，明示的な `height$p ］で正せるが、 一部の~layout~system — `~flex~layout$／`格子~layout$など — においては，意図されない効果が生じ得る — ［ そこでは、 明示的な `height$p は，内容に基づく暗黙的な縦幅より優先される ］ので、［ 要素を~lay-outした結果は、 単純に内容が要素の縦幅まで埋められたときとは，かなり異なる ］かもしれない。 要素に`明示的な内在的~内縁~size$を供することは、［ ~layout用には，要素の内容を無視する ］ことによる処理能の便益は保全しつつ，［ 内容が在ったかのように~sizeする ］ことを許容する。 ◎ Note: An element with size containment is laid out as if it had no contents [CSS-CONTAIN-1], which in many cases this will cause the element to collapse to zero inner height. This can be corrected with an explicit height chosen to show the expected contents, but that can have unintended effects in some layout systems, such as Flex and Grid Layout, which treat an explicit height as a stronger command than an implicit content-based height. The element thus might lay out substantially differently than it would have were it simply filled with content up to that height. Providing an explicit intrinsic inner size for the element preserves the performance benefits of ignoring its contents for layout while still allowing it to size as if it had content.

`contain-intrinsic-size$p は、［ `contain-intrinsic-width$p, `contain-intrinsic-height$p ］~propを設定する略式~propである。 ◎ contain-intrinsic-size is a shorthand property that sets the contain-intrinsic-width and contain-intrinsic-height properties.

［ 1 個目／ 2 個目 ］の値は、［ `contain-intrinsic-width$p ／ `contain-intrinsic-height$p ］の値を表現する。 値が 1 個だけ与えられた場合、 それが 2 個目の値も与える。 ◎ The first value represents the contain-intrinsic-width value, and the second represents the contain-intrinsic-height value. If only one value is given, it applies to both properties.

div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  overflow: auto;
}

div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  height: 50px;
  overflow: auto;
}

5.3. 応答可能に~sizeされる~iframe_e： `frame-sizing^p ~prop

`置換され$る要素には、 “通常の” ~flowされる内容を包含し得るものもある — ~HTMLの `iframe$e など。 ~privacyと~securityの理由から、 これらの要素は，既定では［ 自身の内部的な内容の~sizingについての情報 ］を外側~pageには公開しない — 代わりに，静的かつ予め決定-済みな内在的~sizeだけを利用して、 各自の内容を~scroll可能にする。 `frame-sizing$p ~propは、 そのような要素が［ `内部~layout内在的~size@ — その実際の内容~size — を公開すること ］を~opt-inすることを許容する。 ◎ Some replaced elements can contain "normal" flowed content, such as HTML iframes. For privacy and security reasons, these elements do not, by default, expose any information about their internal contents' sizing to the outside page, instead just using a static, predetermined intrinsic size, and making their contents scrollable. The frame-sizing property allows these elements to opt into exposing their actual content size, known as their internal layout intrinsic size.＼

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

`auto@v1

当の要素の`内部~layout内在的~size$は、 有っても無視される。 ◎ The element’s internal layout intrinsic size, if any, is ignored.

`content-width@v1

`content-height@v1

`content-block-size@v1

`content-inline-size@v1

当の要素が`内部~layout内在的~size$を有する場合、 その`内在的~size$は，`内部~layout内在的~size$から 当の~keywordに対応する寸法（横幅／縦幅）をとる （他方の寸法は、 通常に決定される）。 ◎ If the element has an internal layout intrinsic size, its intrinsic size takes the corresponding dimension (either width or height) from the internal layout intrinsic size. (The other dimension is determined normally.)

論理-方向は、 当の要素の`書字~mode$に基づいて解決される — 埋込まれた文書のそれではなく）。 ◎ Logical directions resolve based on the writing mode of the element. (Not the embedded document.)

［ どの要素が`内部~layout内在的~size$を有し得るか ］および［ それは どう決定されるか ］は、 `文書~言語$により裁定される。 ~HTMLにおいては、 `内部~layout内在的~size$を有し得る要素は， `iframe$e に限られることに加え、 それを有するのは，埋込まれた文書も［ `meta$e 要素のうち， `responsive-embedded-sizing^v を値に伴う `name^a 属性を有するもの ］ ＊`<meta name=responsive-embedded-sizing>^c 要素を介して それを~opt-inしたとき限られる （ ＊`§ ~HTML~iframe_eの詳細＠#iframe-frame-sizing$を見よ）。 ◎ Which elements can have an internal layout intrinsic size, and how it’s determined, are decided by the document language. In HTML, only iframe elements can have an internal layout intrinsic size, and further, only when the contained document has also opted in via a <meta name=responsive-embedded-sizing> element. (See § 5.3.1 HTML iframe Details.)

<meta name="responsive-embedded-sizing">
<div style="height: 500px"></div>

iframe {
  frame-sizing: content-height;
}

加えて，埋込まれた文書は、 後で `requestResize()$m を~callして， 自身の`内部~layout内在的~size$を更新できる。 ◎ In addition, the internal document can call window.requestResize() to update its internal layout intrinsic size later.

partial interface `Window$I {
  `undefined$ `requestResize$m();
};

5.4. 内在的~size供与

`~level 3$ `§ 内在的~size供与＠~SIZING#intrinsic-contribution$ を統合する。 ◎ CSS Sizing 3 § 5.2 Intrinsic Contributions

5.5. 最小-内容~size供与の~zero化： `min-intrinsic-sizing^p ~prop

この~propの名前は、 何らかの `bikeshedding^en が切に必要である。 ◎ This property seriously needs some name bikeshedding.

この~propは、 ある種の状況下で，`置換され$ない~boxの`最小-内容 供与$が “圧縮される” かどうかを定義する。 各種~値の意味は： ◎ This property defines whether the min-content contribution of a non-replaced box is “compressed” under certain circumstances. Values have the following meanings:

`legacy@v1

~boxの`最小-内容 供与$は、 通常通り取扱われる。 ◎ The box’s min-content contribution is handled as normal.

`zero-if-scroll@v1

当の~boxは`~scroll容器$である場合には、 その`最小-内容 供与$は、 `that^en 軸【`~scroll可能な軸$？】において “圧縮される”。 ◎ The box’s min-content contribution is “compressed” if it is a scroll container in that axis.

`zero-if-extrinsic@v1

当の~boxは`外在的$szな［ `選好d~size$／`最大~size$ ］を有するならば、 その`最小-内容 供与$は “圧縮される”。 ◎ The box’s min-content contribution is “compressed” if has an extrinsic preferred or maximum size.

注記： これは、 ほとんどの`置換され$る要素に対し既定の挙動を与える。 ◎ Note: This is the default behavior of most replaced elements.

*, ::before, ::after { min-intrinsic-sizing: zero-if-scroll; }

注記： `zero-if-scroll$v1 の方が良い既定の挙動になったであろうが、 ~Web互換性に因り，あいにく`初期~値$にはし得ない。 ◎ Note: The behavior of zero-if-scroll would have been a better default, but due to Web-compat, it cannot be the initial value. :(

“圧縮される” `最小-内容 供与$は、 ~boxは空であったかのように計算される — `~sizing~prop$に対する明示的な［ `min-content$v ／ `max-content$v ／ `fit-content$v ］値により課される~sizing拘束において `factor^en しているときを除いて。 ◎ The “compressed” min-content contributions is calculated by pretending the box were empty, except when factoring in sizing constraints imposed by explicit min-content, max-content, and fit-content values of the sizing properties.

5.6. ~col~sizingを与える新たな値

`column-width$p 用の値に利用される新たな~keywordは、 最適とされる~col幅を指定する — 以下における %容器 は、 当の`複-~col容器$を指すとする： ◎ When used as values for column-width, the new keywords specify the optimal column width:

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

`stretch@v1

最適な~col幅を［ %容器 の`伸張して収まる行内~size$ ］として指定する。 ◎ Specifies the optimal column width as the stretch-fit inline size of the multi-column container.

`min-content@v1

最適な~col幅を［ %容器 の【！内容の】`最小-内容 行内~size$ ］として指定する。 ◎ Specifies the optimal column width as the min-content inline size of the multi-column container’s contents.

`max-content@v1

最適な~col幅を［ %容器 の【！内容の】`最大-内容 行内~size$ ］として指定する。 ◎ Specifies the optimal column width as the max-content inline size of the multi-column container’s contents.

`fit-content@v1

最適な~col幅を次の結果として指定する ⇒ `min^op( %容器 の`最大-内容 行内~size$, `max^ops( %容器 の`最小-内容 行内~size$, %容器 の`伸張して収まる行内~size$ ) ) ◎ Specifies the optimal column width as min(max-content inline size, max(min-content inline size, stretch-fit inline size)).

`fit-content$f

最適な~col幅を次の結果として指定する ⇒ `min^op( %容器 の`最大-内容~size$, `max^ops( %容器 の`最小-内容~size$, 引数に与えられた `length-percentage$t ) ) ◎ Specifies the optimal column width as min(max-content size, max(min-content size, <length-percentage>))

注記： ~col幅は、 ~colごとに変わることは決してない。 ~col幅が（上で与えた~keywordにより）`複-~col容器$の内容に基づく場合、 その内容~すべてが考慮され， 計算した結果の幅は【当の容器~内の】すべての~colから共有される。 ◎ 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.

【 この節を成す内容は、 `fit-content$f が追加されたことを除いて， `~level 3$ と`同じ＠~SIZING#column-sizing$。 】

6.1. 包含して収まる~sizing： 縦横比を保守しながら伸張する

包含して収まる~sizingは，本質的には伸張して収まる~sizingを適用するが、 ~boxの`選好d縦横比$を保守するよう，一方の軸における~boxの~sizeを抑制する — ［ `object-fit$p ／ `background-size$p ］~prop用の~keyword `contain^v と類似に。 ◎ Contain-fit sizing essentially applies stretch-fit sizing, but reduces the size of the box in one axis to maintain the box’s preferred aspect ratio, similar to the contain keyword of the object-fit and background-size properties.

まず，~target矩形を以下に従って決定する： ◎ First, a target rectangle is determined:

1. ~target矩形【の~size（以下同様）】は、 初期~時は~boxの包含塊の~sizeとする — ここでは、 `不定$な~sizeは無限大と見做す。 どちらの寸法も不定な場合、 初期~target矩形は，［ ~box【`内容~box$】の~sizeが`伸張して収まる~size$~FNであったとするときの~boxの`外縁~辺$ ］に合致するよう設定される。

   【~FN ~boxに`可用な空間$が`不定$な場合、 この~sizeは定義されないが，その場合にどうなるのか述べられていない。 】

   ◎ The initial target rectangle is the size of the box’s containing block, with any indefinite size assumed as infinity. If both dimensions are indefinite, the initial target rectangle is set to match the outer edges of the box were it stretch-fit sized.
2. ~boxの［ `max-width$p ／ `max-height$p ］は `none$v でない場合、 ~target矩形を［ 影響される次元において~boxの~margin~boxの “最大~size” 以下になる ］よう切詰める — すなわち、 ~boxが その［ 最大-横幅／最大-縦幅 ］に~sizeされたとするときの~margin~boxの~size。 （通常の【`~flow~layout$における】 `~boxを~sizeする規則＠~CSS2J#visuren$ `CSS2$r と整合するよう、 この “最大~size” は，~boxの［ `min-width$p／`min-height$p ］の効果により切り上げられることに注意。） ◎ Next, if the box has a non-none max-width or max-height, the target rectangle is clamped in the affected dimension to less than or equal to the “maximum size” of the box’s margin box, i.e. the size its margin box would be if the box was sized at its max-width/height. (Note that, consistent with normal box-sizing rules, this “maximum size” is floored by the effects of the box’s min-width/min-height.)
3. 一方の次元において，~target矩形を抑制する — ~boxの`選好d縦横比$に合致するために必要yな最小な分だけ。 ◎ Last, the target rectangle is reduced in one dimension by the minimum necessary for it to match the box’s preferred aspect ratio.

各~次元における包含して収まる~sizeは、 ~target矩形の中へ収まるよう伸張した結果の【`内容~box$の】~sizeになる。 ◎ The contain-fit size in each dimension is the size that would result from stretch-fitting into the target rectangle.

伸張して収まる~sizingによる`~margin相殺$に関する結果を，何であれ ここに複製する。 ◎ Copy whatever stretch-fit ends up doing wrt margin collapsing.

一方の次元において［ 縦横比が尊守されたとするとき、 ~target矩形を~overflowさせる最小~size ］が在る場合、［ 縦横比を尊守する, 画像を不均等に拡縮する ］どちらにするか？ 前者の場合、［ 上の #2 に類似な，関連な最小を適用する段 ］が必要になる。 ◎ If there is a minimum size in one dimension that would cause overflow of the target rectangle if the aspect ratio were honored, do we honor the aspect ratio or skew the image? If the former, we need a step similar to #2 that applies the relevant minimums.

6.2. 百分率~sizing

…

7.1. `calc-size^f の解決-法

`calc-size$f 関数は、 `使用~値$の時点より前に解決される【！or simplified】ことはない （ `§ ~calc-size_fの補間-法＠#interpolate-calc-size$ を見よ）。 ◎ Before used value time, calc-size() functions are not resolved or simplified. (But see § 7.2 Interpolating calc-size().)

`calc-size$f 関数の`計算式$cSは、 `calc$f 式の値と同様に， `使用~値$の時点で解決される — 当の計算式~内の `size$v ~keywordへ当の関数の`基底s$cSの使用~値を代入して， 各~百分率を ［ それが`確定的$であるならば 通常に／ 他の場合は `0px^v を~~基準に ］評価することにより。 ◎ At used value time, the calc-size calculation is resolved just like the value of a calc() expression, by substituting in the used value of the calc-size basis for the size keyword in the calc-size calculation, and evaluating any percentages normally (if they are definite) or against 0px (if they are not).

7.2. `calc-size^f の補間-法

`calc-size$f 関数は、［ `length-percentage$t ／ `size-keyword$t ］ %値 とも補間し得る。 ［ これらの値を補間できるかどうか, できる場合の補間の挙動 ］を決定するときは、 %値 を次に与える `calc-size^f として扱う下で，上の~algo【！規則】を適用する： ◎ Some calc-size() values can also be interpolated with a <length-percentage> or an <size-keyword>. To determine whether the values can interpolate and what the interpolation behavior is, treat the non-calc-size() value as＼

• %値 は `calc-sum$t として与えられた場合 ⇒ calc-size(`any$v, %値 ) ◎ calc-size(any, value ) if the value is a <calc-sum>＼
• 他の場合 ⇒ calc-size( %値, `size$v) ◎ or as calc-size( value , size) otherwise, and apply the rules above.

details {
  transition: height 1s;
}
details::details-content {
  display: block;
}
details[open]::details-content {
  height: auto;
}
details:not([open])::details-content {
  height: calc-size(any, 0px);
}

注記： これらの規則は、 calc-size(any, ある`確定的$な長さ ) と他の何かとの補間が — 他の何かがどう指定されたかに関わらず — `常に^em滑らかになることを許容する。 ◎ Note: These rules allow calc-size(any, definite length) to always interpolate smoothly, regardless of how the other side of the transition is specified.

注記： 上述した “素な %値 を `calc-size$f へ昇格する” 挙動は、 昇格された `calc-size^f の`計算式$cSの中へ %値【！`length-percentage$t】 を置く。 このことは、 %値 が百分率を伴う場合でも，［ %値 と内在的~size~keywordを補間すること ］を許容するが、［ 百分率が`確定的$でないときには、 当の百分率は 0 へ解決されるようになる ］ことを意味する。 作者は，［ 百分率が当の要素の実際の~sizeを~~基準に解決されるようになる ］ことを求めるなら、 `基底s$cSとして %値 を伴う `calc-size^f を明示的に与えること — `calc-size(50%, size)^v の様に。 ◎ Note: This "upgrade a plain value into a calc-size()" behavior puts <length-percentage> values into the calc-size calculation. This allows values with percentages to interpolate with intrinsic size keywords, but does mean that when a percentage isn’t definite, it’ll resolve to zero. If you want to resolve to the actual size the percentage would make the element, explicitly write a calc-size() with the value in its calc-size basis, like calc-size(50%, size).

7.3. ~sizing~keywordの自動的な補間-法： `interpolate-size^p ~prop

この~propは、 `~sizing~prop$に対し， ~keyword値を `length-percentage$t 値と滑らかに結合することを許容する — そのような事例~用に`離散的$な~animation【！ (See Web Animations § 5.2 Animating properties.)】を利用することなく。 ◎ This property allows keywords on the sizing properties to smoothly combine with <length-percentage> values rather than using discrete animation for this case. (See Web Animations § 5.2 Animating properties.)

`numeric-only@v1

`size-keyword$t と結合できるものは、 それと互換な `calc-size$f に限られる。 ◎ A <size-keyword> can only be combined with a compatible <calc-size()>.

`allow-keywords@v1

`~sizing~prop$用の値どうしは、［ 一方が `size-keyword$t, 他方が `length-percentage$t ］である場合には，結合できる。 これは、 所与の `size-keyword$t %~keyword に対し，［ %~keyword は calc-size(%~keyword, size) であった ］かのように扱う下で［ `calc-size$f の`補間-法＠#interpolate-calc-size$を適用する ］ことにより行われる。 他の事例においては、 `size-keyword$t は，依然として補間できない。 ◎ Sizing values can also be combined if one of them is an <size-keyword> and the other is a <length-percentage>. This is done by treating the <size-keyword> keyword as though it is calc-size(keyword, size) and applying the rules in § 7.2 Interpolating calc-size(). In other cases, a <size-keyword> still cannot be interpolated.

注記： `allow-keywords$v1 に設定することは， `ほとんどの^em ~size値が補間されるようになることを許容するが、 すべてではない — 異なる~keywordどうしは、 依然として，補間-可能にならない。 ~layout~algoは、［ 子孫が精確に どの~sizing~keywordを利用しているか ］に基づいて， それらの挙動を［ 補間の間には表現し得ない仕方 ］で変更し得るので。 ◎ Note: Setting allow-keywords allows most size values to be interpolated, but not all; different keywords are still not interpolable with each other, as layout algorithms can change their behavior based on precisely which sizing keyword a descendant is using, in a way that can’t be represented during interpolation.

注記： `allow-keywords$v1 を設定することは， `calc-size$f を手動で利用する必要を `ほとんど^em 除去するが、 それでも，それを利用することに便益がある事例はある。 例えば，`包含塊$の~sizeが`不定$である場合、 `width$p を `100%^v から `0px^v へ素朴に補間しても， 期待されるとおりには働かない （中間的な値は，`~autoとして挙動する$かもしれず、 その場合，それらの値は `100%^v と同じ~sizeになるので）。 一方で， `width^p に手動で［ `calc-size(100%, size)^v ／ `calc-size(any, 0px)^v ］を書いたなら、 これらの値の合間で滑らかに補間されるようになる。 ◎ Note: Setting allow-keywords mostly removes the need to use calc-size() manually, but there are still some cases that can benefit from using it. For example, if the containing block size is indefinite, naively interpolating width: 100% to width: 0px won’t work as expected (since the intermediate values might behave as auto, making them the same size as 100%), but manually writing width: calc-size(100%, size); and/or width: calc-size(any, 0px); will, causing the element to smoothly interpolate between the two values.

注記： 過去へ戻れたなら、 この~propは存在しなかった。 `allow-keywords$v1 の挙動は、 既定では どう働くかを変えるだけである。 これが存在するのは、 既存の多くの~stylesheetが［ ~sizing~keyword（ `auto$v, `min-content$v, 等々）をまったく補間し得ない ］ものと見做すからであり，［ それらを補間することにした場合，非互換化された挙動を生産することになる ］からである。 この前提との互換性を得るため、 この補間を許容することには，~opt-inが要求される。 この~propは継承されるので、 根~要素の `interpolate-size^p に `allow-keywords$v1 を指定すれば， 新たな挙動を~page全体に許容する。 互換性が課題にならない所では、 そうすることが示唆される。 ◎ Note: If we had a time machine, this property wouldn’t exist; the allow-keywords behavior would just be how things worked by default. It exists because many existing style sheets assume that the sizing keywords (auto, min-content, etc.) cannot interpolate at all, and would produce broken behavior if they started interpolating. For compatibility with this assumption, allowing this interpolation requires an opt-in. Because the property inherits, specifying :root { interpolate-size: allow-keywords; } allows the new behavior for the entire page. We suggest doing this wherever compatibility isn’t an issue.

`interpolate-size$p の値が問われる時点, それを問うものは、 当の要素の【他の~propの】~animationが開始するかもしれない時点における， その`算出d値$である。 ~CSS遷移~用には、 これは，`変化-後~style$における値を意味する。 ~animationは、 その後に `interpolate-size^p が変化しても［ 停止される／開始される ］ことはない。 ◎ The value of interpolate-size that matters is the computed value on the element at the time the animation might start. For CSS transitions, this means the value in the after-change style. An animation is not stopped or started later because interpolate-size changes.