iPhone端Chrome/Safari滚动失效问题排查（关联container-type）

问题现象 #

页面在Mac版Chrome、Android版Chrome中滚动正常，但iPhone的Chrome/Safari里无法滚动。移除.container类的container-type: inline-size属性后滚动恢复，但该属性是容器查询必需的，需要保留。

原因分析 #

iOS的WebKit内核在处理container-type: inline-size时，会为元素创建新的格式化上下文，干扰了flex布局下子元素的高度计算和滚动上下文识别，导致.scroll容器无法正确获取可滚动的空间。

修复方案 #

通过为flex子元素.main添加overflow: hidden，重新建立正确的块级格式化上下文，让.scroll容器能基于父元素的可用高度正常滚动。

修改后的CSS代码 #

.container {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.main {
  flex-grow: 1;
  /* 添加该行，修复iOS滚动问题 */
  overflow: hidden;

  @container (width >=1024px) {
    background-color: red;
  }
}

.scroll {
  overflow-y: auto;
}

备选方案 #

如果上述方案不生效，也可以给.scroll容器设置明确的高度，确保它能识别滚动空间：

.scroll {
  overflow-y: auto;
  height: calc(100dvh - 2rem); /* 根据头部实际高度调整数值 */
}

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