Chrome与Edge浏览器的Overflow行为差异及适配方案咨询

先复现你遇到的问题，以下是完整代码示例：

CSS代码 #

.container1 { 
  display: flex; 
  flex-flow: column; 
  align-items: flex-start; 
} 
.container2 { 
  display: flex; 
  flex-flow: column; 
  align-items: flex-start; 
} 
.container3 { 
  max-height: 150px; 
  overflow: auto; 
} 
.content { 
  width: 500px; 
  height: 200px; 
  background-color: blue; 
}

HTML代码 #

<div class="container1"> 
  <div class="container2"> 
    <div class="container3"> 
      <div class="content"></div> 
    </div> 
  </div> 
</div>

差异原因分析 #

这个差异的核心在于多层嵌套flex容器的宽度计算逻辑，在Edge和Chrome中存在细微实现区别：

• 在Chrome中，container1和container2作为column方向的flex容器，且设置了align-items: flex-start时，它们的宽度会自动被子元素依次撑开——最终container3的宽度会匹配子元素content的500px宽度，因此水平方向无溢出，仅垂直方向因内容高度超过max-height出现滚动条。
• 而在Edge的部分Chromium内核版本中，处理这种嵌套结构时，会错误地将container3的宽度限制为父容器的可用宽度（比如视口宽度），当视口宽度小于500px时，content的宽度超出container3，就会触发不必要的水平滚动条。

解决方法：让Edge表现与Chrome一致 #

我们可以通过显式指定宽度计算规则，确保container3能正确匹配内容宽度，有两种实用方案：

方案1：给container2添加width: fit-content #

让container2的宽度由子元素container3决定，这样container3就能自然撑开至content的宽度：

.container2 { 
  display: flex; 
  flex-flow: column; 
  align-items: flex-start; 
  width: fit-content; /* 添加这一行 */
}

方案2：直接给container3设置宽度匹配内容 #

如果不需要父容器跟随宽度变化，也可以直接给container3设置宽度规则：

.container3 { 
  max-height: 150px; 
  overflow: auto; 
  width: fit-content; /* 添加这一行 */
}

这两种方案都能让Edge的滚动条表现和Chrome一致，仅显示垂直滚动条，同时保留布局的灵活性。

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