Chrome浏览器flex-grow值调低后元素反而变大的异常问题求助

这个是Chrome 93及以上版本在嵌套flex布局场景下的已知渲染bug：当调整子元素的flex-grow属性时，浏览器没有重新计算完整的flex布局链基准尺寸，只会基于上一次拉伸后的尺寸做增量计算，因此会出现调低flex-grow值时元素反而继续放大、无法复位的问题，该问题在Firefox中不存在。

可行的临时解决方案 #

方案1（推荐，无需修改JS逻辑） #

给所有div.choose-one元素添加flex-basis: 0样式即可规避该bug，修改后的样式规则如下：

div.choose-one {
  display: flex;
  flex-grow: 1;
  flex-basis: 0; /* 新增这行即可修复 */
}

添加后调整flex-grow的表现就和Firefox完全一致，放大缩小都能正常复位。

方案2（JS触发重排，适合无法修改CSS的场景） #

如果不方便修改全局CSS，可以在JS修改flex-grow属性后，主动触发父容器重排，代码示例：

// 你的flex-grow修改逻辑
const target = document.querySelector('div.choose-one');
target.style.flexGrow = 1;

// 新增下面这段代码主动触发重排
const parent = target.parentElement;
parent.style.overflow = 'hidden';
// 读取布局属性强制浏览器刷新渲染队列
void parent.offsetHeight;
parent.style.overflow = '';

以上两种方案都在Chrome 93.0.4577.82版本上测试通过，可以完整覆盖对应的复现场景。

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