如何使用嵌套CSS容器引用顶部容器查询

Question

我有许多相互嵌套的 DIV：

<div id="outer">
  <div id="inner">
    <div id="content"></div>
  </div>
</div

“outer”的宽度设置为视口宽度的百分比。 在 CSS 中，我在“外部”和“内部”上设置了容器查询：

#outer {
  container: outer / size;
}
#inner {
  container: inner / size;
}

一切都按预期工作，直到我尝试将“内容”的宽度设置为“外部”的百分比：

@container outer (min-width: 100px) {
  #content {
    width: 40cqw;
  }
}

我期望发生的是“内容”的大小相对于“外部”而言。实际发生的情况是“内容”相对于“内部”而言变得更大。

如果我删除“内部”上的容器查询，“内容”的宽度将相对于“外部”设置。

如何获得相对于“外部”宽度设置的“内容”宽度？

Answer 1

问题的出现是因为容器查询适用于最近的容器祖先。在您的情况下，

#content

位于

#inner

内部，它有自己的容器查询。因此，

#content

的宽度是相对于

#inner

而不是

#outer

调整大小的。

你可以做的是

1. 如果不重要，请从 #inner 中删除容器属性，确保 #content 仅引用 #outer。

2. 对基于#outer宽度的#content使用媒体查询，而不是依赖容器查询，因为媒体查询不受嵌套限制（不是最优雅的解决方案，但应该可以解决问题）。

    #content {
      width: 100%;
    }
   
    @media (min-width: 600px) {
      #outer {
        width: 80%; /* Outer container grows */
      }
   
      #content {
        width: 50%; /* Content width adapts to outer */
      }
    }
   

此方法允许您使用媒体查询相对于

#content

调整

#outer

，“绕过”直接父级

#inner

。