父元素设置container inline-size后fixed子元素失效，如何解决？

当父元素设置container: dialog_data / inline-size时，该元素会成为容器查询容器，根据CSS规范，fixed定位子元素的包含块会从视口切换为这个容器元素，导致子元素不再相对于页面视口固定。要保留父元素的inline-size容器设置，可采用以下两种方案：

方案1：将容器查询容器转移到父元素的外层容器 #

把原本设置在父元素上的容器查询配置移到一个外层包裹元素上，父元素保留原有样式（包括position: relative），这样fixed子元素的包含块仍为视口，同时不影响容器查询的功能。

修改后的代码：

.container-wrapper {
  container: dialog_data / inline-size;
  max-width: 300px;
}

.parent {
  position: relative;
  height: 150px;
  background: #eee;
}

.child {
  background: red;
  height: 100px;
  position: fixed;
  z-index: 2147483648;
  bottom: 20px;
  left: 20px;
  margin: 0;
  width: 100%;
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}

<div class="container-wrapper">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

方案2：手动覆盖父元素的contain属性（需谨慎验证） #

容器查询容器默认会隐含contain: layout style;，这是导致fixed包含块变化的核心原因。可以手动将父元素的contain属性设置为style，移除layout包含，这样fixed子元素的包含块会回到视口，同时父元素仍可作为容器查询的容器（部分浏览器可能存在兼容性问题，需测试）。

修改后的父元素CSS：

.parent {
  position: relative;
  height: 150px;
  background: #eee;
  max-width: 300px;
  container: dialog_data / inline-size;
  contain: style; /* 覆盖默认的contain: layout style */
}

注意：方案2可能影响容器查询的某些布局计算，建议在目标浏览器中充分测试后使用。

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