Chrome 96版本max-height属性值表现异常，Firefox中运行正常

问题根因 #

该异常属于Chrome 96.0.4664.x版本的官方已知渲染bug，在后续的96小版本迭代中已经完成修复。触发该问题的核心原因是Chrome 96版本重构了块级元素高度计算逻辑，错误地将未显式声明高度的父元素的隐式高度排除在max-height百分比取值的判定基准之外，当max-height和flex布局、overflow属性共同使用时就容易触发该异常。Firefox没有调整该部分渲染逻辑，因此表现符合预期。

兼容方案 #

如果暂时无法要求终端用户升级Chrome版本，可采用以下任意一种方案临时修复：

• 给设置了max-height的元素的所有父级节点，按层级显式声明height: 100%，保证max-height的百分比取值有明确的计算基准
• flex布局场景下给父级元素添加min-height: 0属性，即可绕开该版本的高度计算逻辑缺陷
• 用height属性结合overflow: auto替代max-height实现高度限制，该写法的渲染优先级高于max-height，不会触发该bug
• 可通过UA检测对Chrome 96版本做单独的样式兼容，示例代码如下：

// 检测Chrome 96.0.4664版本
const isBugChromeVersion = /Chrome\/96\.0\.4664/.test(navigator.userAgent)
if (isBugChromeVersion) {
  document.documentElement.classList.add('chrome-96-bug')
}

再编写对应的CSS覆盖样式即可：

.chrome-96-bug .目标元素选择器 {
  height: 预期高度值;
  overflow: auto;
}

内容的提问来源于stack exchange，提问作者Samet Şahin