如何查询容器是否高于视口？

Question

我正在尝试容器查询并试图更好地理解它们。

我想要实现的一个想法是，当容器扩展视口时，或者换句话说，当内容扩展容器时，实现特定的样式。 基于一篇文章，我尝试使用

container-type: size

并在容器元素上添加

height

和

overflow

。

我用一个例子制作了一个CodePen：https://codepen.io/Kageetai/pen/LYvMMwx 如果容器高于视口，我想将文本设为红色。

我从其他一些研究中得到的理解是，不可能查询容器高度，至少如果它是可变高度，例如

height: 100%

等。由于渲染特定高度然后查询相同高度的循环，似乎永远不可能实现。

所以我的问题是：还有其他人对此和/或容器查询的当前状况有任何见解吗？

Answer 1

据我了解，这是不可能的。

当您将某些内容定义为大小容器 (

container-type: size

) 时，它会自动将大小包含应用于元素 (

contain: size

)，这意味着元素在调整大小时会忽略其子元素。 MDN。