如何在嵌套CSS容器中引用顶层容器查询？

我有多层嵌套的DIV结构：

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

outer的宽度设为视口宽度的百分比，我给outer和inner都设置了容器查询：

#outer {
  container: outer / size;
}

#inner {
  container: inner / size;
}

当我尝试用以下代码把content的宽度设为outer的百分比时出现问题：

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

预期content会以outer为基准调整尺寸，但实际却是以inner为基准。如果删除inner上的容器查询，content的宽度就会正常以outer为基准。

复现问题的完整代码 #

CSS

#outer {
  box-sizing: border-box;
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  bottom: 10%;
  border: 1px dotted red;
  container: outer / size;
}

#inner {
  box-sizing: border-box;
  position: relative;
  left: 10%;
  top: 10%;
  width: 300px;
  height: 300px;
  border: 1px dashed blue;
  /* 取消注释下面一行就能看到问题 */
  /*container: inner / size;*/
}

#content {
  height: 100px;
  background-color: aqua;
}

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

HTML

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

如果“容器查询仅作用于最近的容器祖先”这一结论成立，那么我的问题没有直接解决方案，我会考虑重新设计页面，避免容器查询嵌套。

内容的提问来源于stack exchange，提问作者Andrew Foulds