容器查询折叠元素的宽度

Question

为什么container-type: inline-size正常渲染跨度但折叠按钮：

<span style="container-type: inline-size; outline: 1px solid blue;">
  This is a span
</span>

<button style="container-type: inline-size;">
  This is a button        
</button>

Answer 1

tl;dr 容器不能根据其内容调整大小，并且内联元素不能是容器。

\n

这里发生了一些事情：

\n

\n

1. container-type: inline-size对元素应用各种类型的“包含”inline-size ，包括包含。

   \n

   大小包含“关闭”元素从其内容获取大小信息的能力。这对于容器查询很重要，因为它打破了容器查询更改内容大小的“无限循环”，从而更改了查询，从而更改了\xe2\x80\xa6

   \n

   因此，容器大小必须来自上下文（例如，默认情况下块元素会拉伸，网格 Flex 中的元素也可以拉伸等）或 CSS 中的显式大小调整。在这些情况之外，具有尺寸限制的元素将会崩溃。由于像按钮这样的内联块元素会收缩包裹到其内容，并且大小包含会删除内容大小，因此它们默认会折叠。将它们放入 Flex 或网格中，或者添加块显示，它们将拉伸以适应其上下文。

   \n
\n

2. 大小限制不适用于内联元素（除非它们是“原子内联”，例如图像和视频以及没有其他内容的内容）。

   \n

   使用内联元素作为容器是行不通的。您仍然可以使用跨度，只需为其提供非内联显示即可。这应该在浏览器开发工具中显示为未应用的样式，但我想现在还没有。我希望浏览器能够澄清这一点。

   \n
\n

\n

所以你的所有代码都按照规范运行。容器必须忽略其内容大小这一事实是我们不将所有内容都作为容器的主要原因。这也是使容器查询正常工作所需的技巧。

\n