CSS 框尺寸模块第 4 级

1. 简介

本规范是相对于 CSS 尺寸第 3 级的差异规范。 它目前是一份探索性工作草案： 如果你正在实现任何内容，请以第 3 级作为参考。 一旦本草案达到 CR，我们会将第 3 级的文本合并到本草案中。

1.1. 模块交互

本模块扩展了 width、height、min-width、min-height、max-width、max-height 和 column-width 功能，这些功能定义于 [CSS2] 第 10 章以及 [CSS3COL]

1.2. 值定义

本规范遵循 [CSS2] 中的 CSS 属性 定义约定， 并使用 [CSS-VALUES-3] 中的 值定义语法。 本规范中未定义的值类型定义于 CSS 值和单位 [CSS-VALUES-3]。 与其他 CSS 模块组合使用时，可能会扩展这些值类型的定义。

除各属性定义中列出的属性特定值外， 本规范定义的所有属性 也都接受 CSS 全局关键字作为其属性值。 为便于阅读，这里没有明确重复列出它们。

2. 术语

CSS 尺寸 3 § 2 术语

3. 指定框尺寸

CSS 尺寸 3 § 3 指定框 尺寸

3.1. 尺寸属性

CSS 尺寸 3 § 3.1 尺寸 属性

size 属性是一个简写属性， 可在单个声明中设置 width 和 height。 如果省略第二个值， 则从第一个值复制。

size 简写属性不能用于 @page 上下文中， 因为 @page 已经有一个无关的 size 描述符， 用于设置页面尺寸。

size 属性需要从 CSSOM 中的 首选 简写顺序中排除， 以避免兼容性问题以及与 @page 的冲突。

min-size 属性是一个简写属性， 可在单个声明中设置 min-width 和 min-height。 如果省略第二个值， 则从第一个值复制。

max-size 属性是一个简写属性， 可在单个声明中设置 max-width 和 max-height。 如果省略第二个值， 则从第一个值复制。

3.2. 新的尺寸值：contain、fit-content() 和 calc-size() 值

CSS 尺寸 3 § 3.2 尺寸值： <length-percentage>、auto | none、min-content、max-content 和 fit-content() 值

第 4 级增加了在 尺寸属性中使用 contain、fit-content() 和 calc-size() 值的能力， 从而将 <box-size> 产生式扩展如下：

<box-size> = <length-percentage> | stretch | contain | min-content | max-content | fit-content | fit-content() | calc-size()

fit-content(<length-percentage [0,∞]>)

使用 fit-content 公式， 但将可用空间替换为指定的参数， 即 min(max-content, max(min-content, <length-percentage>))， 其中 <length-percentage> 参数的解析方式 与独立出现的 <length-percentage> 值完全相同。

负的 <length-percentage> 值无效。

测试

• auto-scrollbar-inside-stf-abspos.html （实时 测试） （源码）
• block-fit-content-as-initial.html （实时 测试） （源码）
• fit-content-length-percentage-001.html （实时 测试） （源码）
• fit-content-length-percentage-002.html （实时 测试） （源码）
• fit-content-length-percentage-003.html （实时 测试） （源码）
• fit-content-length-percentage-004.html （实时 测试） （源码）
• fit-content-length-percentage-005.html （实时 测试） （源码）
• fit-content-length-percentage-006.html （实时 测试） （源码）
• fit-content-length-percentage-007.html （实时 测试） （源码）
• fit-content-length-percentage-008.html （实时 测试） （源码）
• fit-content-length-percentage-009.html （实时 测试） （源码）
• fit-content-length-percentage-010.html （实时 测试） （源码）
• fit-content-length-percentage-011.html （实时 测试） （源码）
• fit-content-length-percentage-012.html （实时 测试） （源码）
• fit-content-length-percentage-013.html （实时 测试） （源码）
• fit-content-length-percentage-014.html （实时 测试） （源码）
• fit-content-length-percentage-015.html （实时 测试） （源码）
• fit-content-length-percentage-016.html （实时 测试） （源码）

contain

如果框具有首选纵横比， 则应用contain-fit 尺寸确定， 尝试在尽可能保持其首选纵横比的同时 适应框的约束。 参见 § 6.1 Contain-fit 尺寸确定：在保持纵横比的同时拉伸。

如果框没有首选纵横比， 则应用stretch-fit 尺寸确定。

calc-size()

参见 CSS 值 5 § 10. 使用内在尺寸进行计算：calc-size() 函数。

注： none 关键字 不能在 calc-size() 中使用。

注： 这些新值加入了 <calc-size()> 定义所称的 “在上下文中允许”的值集合。

4. 纵横比

图像通常具有自然纵横比， CSS 布局算法会在调整元素大小时 尝试保持这一纵横比。

aspect-ratio 属性允许为非替换元素 指定这种行为， 并可更改替换元素的有效纵横比。

我们仍在完善 本节的细节。 如果这里指定的任何行为 会导致具有替换元素且具有首选纵横比的元素， 与在 CSS2、 弹性布局和 网格布局 规范共同要求下（不应用本规范时）的行为不同， 那么这是一个错误，应报告给 CSSWG。 这里有一份尚未关闭的 aspect-ratio 议题列表。

4.1. 首选纵横比：aspect-ratio 属性

此属性为框设置一个首选纵横比， 它将用于计算 auto 尺寸 以及其他一些布局函数。

auto

具有自然纵横比的替换元素 使用该纵横比； 否则该框没有首选纵横比。 涉及纵横比的尺寸计算 始终使用内容框的尺寸。

<ratio>

框的首选纵横比是指定的 width / height 比率。 涉及纵横比的尺寸计算 使用由 box-sizing 指定的框尺寸。

如果 <ratio> 是退化的， 则该属性改为表现得如同 auto。

auto && <ratio>

如果 auto 和 <ratio> 同时指定， 则首选纵横比为指定的 width / height 比率， 除非它是一个具有自然纵横比的替换元素， 在这种情况下改用该自然纵横比。 在所有情况下，涉及纵横比的尺寸计算 始终使用内容框的尺寸。

如果 <ratio> 是退化的， 则该属性改为表现得如同 auto。

测试

• block-aspect-ratio-050.html （实时 测试） （源码）

注： 具有首选纵横比并不会 使一个框成为替换元素； 专用于替换元素的布局规则 通常不适用于具有首选纵横比的非替换框。 例如，一个非替换的绝对定位框 会将 justify-self: normal 视为 stretch，而不是 start （CSS 框对齐 3 § 6.1.2 绝对定位框）， 即使它具有首选纵横比

CSS2.1 并未清晰地区分 替换元素与具有纵横比的元素； 需要找出具体哪些情况不明确，并对其作出定义， 要么在相应的第 3 级规范中，要么在这里。

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

如果一个替换元素唯一的自然 尺寸 是自然宽度或自然 高度， 为其提供首选纵横比 也会赋予它缺失的自然高度或宽度， 方法是通过首选纵横比 传递已有的尺寸。

4.2. 首选纵横比对自动尺寸的影响

当一个框具有首选纵横比时， 它的自动尺寸 的计算方式与一个在该轴上没有自然尺寸、但具有自然纵横比的替换元素相同， 例如参见 CSS2 § 10 和 CSS 弹性框模型第 1 级 § 9.2。 首选尺寸计算 依赖此纵横比的轴 称为比率依赖轴， 如果其输入尺寸也是确定的， 则所得尺寸是确定的。 相反的轴（比率依赖轴的尺寸依赖于它） 称为比率确定轴。

注： 首选纵横比 只有在框的至少一个尺寸 是自动的时才会产生影响。 如果 width 和 height 都不是自动尺寸， 则它不会影响其首选 尺寸。

当我们把所有 尺寸信息移到这里， 而不是强行塞进 2.1 时， 核心原则就只是： 比率确定轴中解析后的首选尺寸 （在应用 min/max 之前） 会通过该比率传递。 min/max 约束随后再进行传递， 然后分别应用到各个轴，而不再考虑纵横比。

4.2.1. 外边距折叠

对于外边距折叠（CSS 2 § 8.3.1 折叠 外边距）， 如果块轴是比率依赖轴， 则不认为它具有计算后的 block-size 值 auto。

4.3. 自动的基于内容的最小尺寸

为避免非预期的溢出， 一个具有首选纵横比的框， 如果它既不是替换元素， 也不是该轴上的滚动容器， 则它在比率依赖轴上的 自动最小尺寸 是其min-content 尺寸， 并受其最大尺寸限制。

div {
  aspect-ratio: 1/1;
  /* 'width' 和 'height' 都默认为 '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. 最小/最大尺寸传递

任一轴 （origin 轴）中的尺寸约束 会通过首选纵横比传递， 并按如下方式应用于另一轴（destination 轴）中任何不确定的 最小、最大或首选尺寸：

• 首先，任何确定的最小尺寸 都会从 origin 轴转换并传递 到 destination 轴。 此传递后的最小值受 destination 轴中任何确定的首选或最大尺寸 的上限限制。

• 然后，任何确定的最大尺寸 都会从 origin 轴转换并传递 到 destination。 此传递后的最大值受 destination 轴中任何确定的首选或最小尺寸 的下限限制， 以及传递后的最小值（如果有）的下限限制。

注： 因此，任何确定的尺寸都完全不受 传递约束的影响； 传递后的最小值永远不会使元素超过确定的首选/最大尺寸， 传递后的最大值也不会使元素违反其首选/最小尺寸。

注： 基本原则是，尺寸约束 通过纵横比传递到另一侧， 在不违反受影响轴上任何显式指定尺寸的前提下， 尽可能保持纵横比。 （这也是形成 CSS2 第 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]

5. 内在尺寸确定

5.1. 内在尺寸

CSS 尺寸 3 § 5.1 内在 尺寸

5.2. 覆盖受包含的内在尺寸：contain-intrinsic-* 属性

这些属性允许具有尺寸 包含的元素指定 一个显式 内在内部尺寸， 从而使框进行尺寸确定时，仿佛其流内内容 的总宽度和高度 与指定的显式内在内部尺寸相匹配 （而不是像空框那样进行尺寸确定）。

注： 这并不总是等价于 假设元素拥有一个指定显式内在 内部尺寸的子元素来进行布局。 例如，一个拥有指定尺寸子元素的网格容器 仍会按照指定的网格确定尺寸， 通常最终会得到比指定值更大的内容尺寸。

none | <length>

如果没有其他 contain-intrinsic-size 值 （例如 auto） 提供显式内在内部尺寸， 那么相应的轴或者没有显式内在内部尺寸 （如果指定了 none）， 或者具有指定 <length> 的显式内在内部尺寸。

auto

如果指定了 auto， 并且元素具有上次记忆的尺寸 且当前正在跳过其内容， 则其在相应轴上的显式内在内部尺寸 是该轴上的上次记忆的尺寸。

注： 例如， 当具有 content-visibility: auto 的元素位于屏幕外时，就会发生这种情况。

测试

• content-visibility-058.html （实时 测试） （源码）

如果一个元素在某个轴上具有显式内在内部尺寸， 那么在按照尺寸 包含的正常方式对元素进行布局之后， 该轴上的内容尺寸会改为被视为显式内在内部尺寸， 而不是布局中计算出的尺寸， 并在必要时再次执行布局。 （如果它在两个轴上都具有显式内在内部尺寸， 这意味着可以跳过第一次布局。）

这四个属性属于一个逻辑属性组。

注： 具有尺寸 包含的元素会被当作没有内容来布局 [CSS-CONTAIN-1]， 在许多情况下，这会使元素折叠为零内部高度。 可以通过显式指定一个经过选择以显示预期内容的 height 来纠正这一点， 但在某些布局系统中，这可能产生意料之外的效果， 例如弹性布局和网格布局， 它们会将显式的 height 视为比基于内容的隐式高度更强的指令。 因此，该元素的布局可能与 仅仅填充内容直到该高度时的布局存在很大差异。 为元素提供显式内在内部尺寸 可以保留在布局中忽略其内容所带来的性能优势， 同时仍允许它像具有内容那样确定尺寸。

contain-intrinsic-size 是一个简写属性， 用于设置 contain-intrinsic-width 和 contain-intrinsic-height 属性。

第一个值表示 contain-intrinsic-width 值， 第二个值表示 contain-intrinsic-height 值。 如果只给出一个值， 则它应用于两个属性。

5.2.1. 上次记忆的尺寸

尺寸包含对于确保页面能够高效渲染非常有价值， 它限制了因元素渲染发生变化 而可能触发的布局工作范围。 然而，它对作者也有很强的限制， 要求作者正确预测元素的尺寸； 如果这个猜测不正确， 即使只差一点， 也可能导致难看的滚动条或内容被意外隐藏。

contain-intrinsic-size 的 auto 关键字提供了一种折中方案： 如果一个元素曾经不受尺寸包含约束， 此值会使元素记住其尺寸 （由布局按正常方式计算）； 随后，如果元素之后获得尺寸包含， 它就会使用记住的尺寸， 从而既获得尺寸包含的性能优势， 又很可能能根据其内容准确确定尺寸。

只有能够作为 ResizeObserver 目标的元素才能具有上次 记忆的尺寸。

5.2.2. 与 overflow: auto 的交互

contain-intrinsic-size 属性提供了对 作者预期元素内容大小的估计， 但这个估计不是真实内容， 也不代表需要向用户显示任何东西。 因此，具有 overflow: auto 的元素不得因为 contain-intrinsic-size 而生成滚动条。

但是，如果 contain-intrinsic-size 表明一个足够大的尺寸， 使得元素若实际包含该尺寸的内容时会生成滚动条， 那么应当按照这种假设内容， 将元素的尺寸确定为仿佛它生成了这些滚动条。

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. 响应式尺寸的 iframe：frame-sizing 属性

一些替换元素可以包含“普通”的流式内容， 例如 HTML iframe。 出于隐私和安全原因， 默认情况下，这些元素 不会向外部页面暴露任何有关其内部内容尺寸的信息， 而是仅使用一个静态的、预先确定的内在尺寸， 并使其内容可滚动。 frame-sizing 属性 允许这些元素选择暴露其实际内容尺寸， 该尺寸称为其内部布局内在尺寸。 各值含义如下：

auto

忽略元素的内部布局内在尺寸（如果有）。

content-width

content-height

content-block-size

content-inline-size

如果元素具有内部布局内在尺寸， 则其内在尺寸 的相应维度 （宽度或高度） 取自内部布局内在尺寸。 （另一个维度按正常方式确定。）

逻辑方向根据元素的书写 模式解析。 （而不是嵌入文档的书写模式。）

哪些元素可以具有内部布局内在尺寸， 以及该尺寸如何确定， 由文档语言决定。 在 HTML 中，只有 iframe 元素可以具有内部布局内在 尺寸， 而且只有在所包含文档也通过 <meta name=responsive-embedded-sizing> 元素选择启用时才可以。 （参见 § 5.3.1 HTML iframe 详细信息。）

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

iframe {
  frame-sizing: content-height;
}

此外， 内部文档可以调用 window.requestResize() 以在之后更新其内部布局内在尺寸。

5.3.1. HTML iframe 详细信息

在 HTML 中，只有 iframe 元素可以具有内部布局内在尺寸， 并且只有当 iframe 的嵌入文档以适当方式选择启用时才可以。

HTML Document 对象 关联有一个响应式嵌入尺寸标志， 其初始状态为未设置。 在文档初始解析期间， 根据以下哪种情况最先发生， 将其设置为 true 或 false：

• 如果遇到 <meta name=responsive-embedded-sizing> 元素， 则将其设置为 true。

• 如果 body 元素被打开（显式或隐式）， 或由解析器插入文档， 则将其设置为 false。

一旦设置为 true 或 false， 在该 Document 的整个生命周期内，该标志的值都不会再次更改。

注： 目前，HTML meta 元素出现在 HTML 文档的 head 中， 是嵌入文档在 HTML 中选择启用此功能的唯一方式。 这意味着 iframe 中的 SVG 文档无法这样做。

注： 由于 HTML 解析器的一些特殊行为， meta 元素在技术上可以出现在 head 和 body 元素之间， 并会被重新设为 head 的子元素。 对于 <meta name=responsive-embedded-sizing> 元素来说，这仍然是有效位置， 因为此时 body 尚未被打开。 请注意，大多数 HTML 元素都会隐式打开一个 body 元素， 即使 body 起始标签并不存在； 如果文档完全缺少这样的元素， 则会自动生成并插入一个空元素。

内部布局内在尺寸首先根据 嵌入文档在触发 DOMContentLoaded 事件之后的第一次布局结果来设置， 并在 load 事件于 Window 上触发时再次设置。 嵌入文档后续的内容、样式或布局变化 不会自动影响内部布局内在 尺寸， 但请参见 requestResize()。

嵌入文档还可以具有一个锁定的嵌入 ICB 尺寸， 其初始值为 null。 如果文档在执行布局时，其响应式嵌入尺寸标志为 true， 且其锁定的嵌入 ICB 尺寸为 null， 则会将其当前初始包含块尺寸记录为其锁定的嵌入 ICB 尺寸。 在后续布局中， 它会使用其锁定的嵌入 ICB 尺寸， 而不是按正常方式计算其初始包含块尺寸。

注： 这种对 ICB 的冻结 降低了出现布局循环的可能性 （例如 iframe 文档的尺寸略大于其 ICB， 然后父 iframe 调整尺寸以匹配， 下一次布局又使其略大于 ICB， 如此无限循环）。

我们是否需要提供一种方式 强制 iframe 忘记其锁定的嵌入 ICB 尺寸？ 也许可以关闭再重新开启 frame-sizing？

导航 iframe 的文档 会使它忘记其锁定的嵌入 ICB 尺寸。 只要新文档的响应式嵌入尺寸标志尚未设置， 它就不会忘记其内部布局内在尺寸。 一旦标志被设置（无论为 true 还是 false）， 内部布局内在尺寸就会被遗忘； 如果标志被设置为 true， 则两者之后都会按正常方式重新计算。

5.3.2. 对 Window 接口的扩展

partial interface Window {
  undefined requestResize();
};

5.4. 内在尺寸贡献

CSS 尺寸 3 § 5.2 内在贡献

5.5. 将 Min-Content 尺寸贡献归零：min-intrinsic-sizing 属性

此属性非常 需要重新斟酌名称。

此属性定义非替换框的min-content 贡献 是否会在特定情况下被“压缩”。 各值含义如下：

legacy

框的min-content 贡献 按正常方式处理。

zero-if-scroll

如果框在该轴上是滚动 容器， 则框的min-content 贡献 会被“压缩”。

zero-if-extrinsic

如果框具有一个外在的 首选或最大尺寸， 则框的min-content 贡献 会被“压缩”。

注： 这是大多数替换元素的默认行为。

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

注： zero-if-scroll 的行为本来会是更好的 默认值， 但由于 Web 兼容性问题，它不能作为初始值。:(

“压缩后”的min-content 贡献 通过假装框为空来计算， 但在考虑由显式的 min-content、max-content 和 fit-content 值 对尺寸属性施加的尺寸约束时除外。

5.6. 新的列尺寸值：stretch、min-content、max-content、fit-content 和 fit-content() 值

当作为 column-width 的值使用时， 这些新关键字指定最佳列宽：

stretch

将最佳列宽指定为多列容器的stretch-fit 行内尺寸。

min-content

将最佳列宽指定为多列容器内容的min-content 行内尺寸。

max-content

将最佳列宽指定为多列容器内容的max-content 行内尺寸。

fit-content

将最佳列宽指定为 min(max-content 行内尺寸, max(min-content 行内尺寸, stretch-fit 行内尺寸))。

fit-content(<length-percentage>)

将最佳列宽指定为 min(max-content 尺寸, max(min-content 尺寸, <length-percentage>))

注： 列宽不会因列而异。 当列宽由多列容器的内容决定时 （如上述关键字）， 会考虑其全部内容， 并由所有列共享计算出的宽度。

6. 外在尺寸确定

CSS 尺寸 3 § 4 外在尺寸 确定

6.1. Contain-fit 尺寸确定：在保持纵横比的同时拉伸

Contain-fit 尺寸确定本质上应用 stretch-fit 尺寸确定， 但会减小框在一个轴上的尺寸， 以保持框的首选纵横比， 类似于 contain 关键字在 object-fit 和 background-size 属性中的行为。

首先，确定一个目标矩形：

1. 初始目标矩形的尺寸为框的包含块尺寸， 任何不确定尺寸都假定为无穷大。 如果两个维度都是不确定的， 则初始目标矩形被设置为 与该框在进行stretch-fit 尺寸确定时的外边缘相匹配。
2. 接下来，如果框具有非 none 的 max-width 或 max-height， 则目标矩形在受影响维度上会被限制为 小于或等于框的外边距框的“最大尺寸”， 即如果框按其 max-width/height 进行尺寸确定时， 其外边距框所具有的尺寸。 （请注意，与正常的框尺寸确定 规则一致， 此“最大尺寸”的下限受到框的 min-width/min-height 的影响。）
3. 最后，目标矩形会在一个维度上缩小 到使其与框的首选纵横比匹配所需的最小程度。

每个维度上的 contain-fit 尺寸 是将框通过 stretch-fit 方式适配到目标矩形后得到的尺寸。

复制 stretch-fit 最终在外边距折叠方面采用的处理方式。

如果某个维度存在最小尺寸， 且在遵循纵横比时会导致目标矩形溢出， 我们应该遵循纵横比还是让图像变形？ 如果是前者，我们需要增加一个类似于 #2 的步骤来应用相关最小值。

6.2. 百分比尺寸确定

…

变更

自 2021 年 5 月 5 日工作草案以来的变更

自 2021 年 5 月 5 日 工作草案以来的重要变更包括：

• 新增 size、min-size 和 max-size 简写属性。 （议题 820）

• 向尺寸 属性新增 calc-size()。 （议题 6265）

• 新增 frame-sizing 属性定义。 （1771）

• 从第 3 级导入 fit-content()，并将 fit-content 和 stretch 降回第 3 级。 （议题 10601）

• 引入 <box-size> 语法产生式，以整合尺寸 值。 （议题 13478）

• 禁止重新排序 contain-intrinsic-size 中的值。 （议题 6391）。

• 仅当元素正在跳过其内容时， 才为 contain-intrinsic-* 属性的 auto 值使用上次记忆的尺寸， 以避免出现虚假尺寸。 （议题 6308）。

• 明确哪些元素会获得上次记忆的尺寸以及何时获得。 （议题 6220）

• 为 contain-intrinsic-size 属性新增逻辑属性组。 （议题 2822）。

• 更改 contain-intrinsic-size 的语法，以允许更 灵活的值组合。 （议题 8407）。

• 禁止 contain-intrinsic-* 属性使用负长度。 （议题 11945）。

• 通过 'contain-intrinsic-size/from-element' 值新增响应式尺寸的 iframe。 （议题 1771）。

• 明确 Flexbox 的stretch-fit 尺寸确定行为与 stretch 略有不同。 （议题 11784）。

• 新增 Web 平台测试覆盖。

• 其他各种小的编辑修正和改进。

自 2020 年 10 月 20 日工作草案以来的变更

自 2020 年 10 月 20 日 工作草案以来的重要变更包括：

• 起草 min-intrinsic-sizing 属性， 以更好地控制滚动容器的 min-content 贡献。 （议题 1865， 议题 4585）

• 为 contain-intrinsic-size 新增长写属性， 以独立控制各个轴。 （议题 5432）

• 为 contain-intrinsic-size 起草 auto 值， 以允许“记住”先前计算出的尺寸。 （议题 5668， 议题 5815）

• 定义 aspect-ratio 中退化比率的处理方式。 （议题 5557）

• 定义 aspect-ratio 如何影响替换元素的自然尺寸。 （议题 5306）

• 修正 § 4.4 最小/最大尺寸传递 一节中的一些错误， 使其行为不会与 CSS2 / CSS 弹性布局 / 等规范定义的行为冲突。 （议题 6071）

• 新增 contain-intrinsic-size: auto none 语法。

自 2020 年 5 月 26 日 首次公开工作草案以来的重要变更包括：

• 将比率确定轴定义为一个术语。

• 定义 min/max 尺寸约束会跨纵横比传递， （议题 5257）

  此外，任一轴中的尺寸约束 （origin 轴） 会通过首选纵横比 按如下方式传递到另一轴（destination 轴）：

  • 首先，任何确定的最小 尺寸都会从 origin 轴转换并传递 到 destination 轴。 此传递后的最小值受 destination 轴中任何确定的首选或最大 尺寸的上限限制。

  • 然后，任何确定的最大 尺寸都会从 origin 轴转换并传递 到 destination。 此传递后的最大值受 destination 轴中任何确定的首选或最小 尺寸的下限限制， 以及传递后的最小值（如果有）的下限限制。

  注： 基本原则是，尺寸 约束会通过纵横比传递到另一侧， 在不违反受影响轴上任何显式指定尺寸的前提下， 尽可能保持纵横比。

• 明确在一个只具有一个自然 尺寸的替换元素上，aspect-ratio 会确定另一个维度。 （议题 5306）

  如果一个替换元素唯一的自然维度 是自然宽度或自然高度， 为其提供首选纵横比 也会赋予其缺失的自然高度或宽度， 方法是通过首选纵横比 传递已有的尺寸。

• 定义 aspect-ratio 会抑制外边距自身折叠 （议题 5328）

  对于外边距折叠（CSS 2 § 8.3.1 折叠外边距）， 如果块轴是比率依赖轴， 则不认为它具有计算后的 block-size 值 auto。

自第 3 级以来的新增内容

• 为尺寸属性新增 fit-content() 函数和 contain 关键字。
• 新增 aspect-ratio 属性。
• 新增 contain-intrinsic-width、contain-intrinsic-height、contain-intrinsic-block-size 和 contain-intrinsic-inline-size 属性， 以及它们的简写属性 contain-intrinsic-size。
• 新增 min-intrinsic-sizing 属性。
• 新增 frame-sizing 属性。

致谢

特别感谢 Aaron Gustafson、L. David Baron 对本模块作出的贡献。

隐私考虑

本规范未引入新的隐私考虑。

安全考虑

本规范未引入新的安全考虑。