浏览器打开气泡卡片渲染滚动条闪动bug: 打开气泡卡片，出现滚动条闪现分析：代码逻辑在气泡卡片内封装了多选框，同时用

记录实际场景遇到的bug小小细节~

bug: 打开气泡卡片，出现滚动条闪现

分析： 代码逻辑在气泡卡片内封装了多选框，同时用div盒子包裹设置了style（max-height: 400px; overflow-y: auto），问了手AI，这么用是可以的；

但是问题就出在这，场景是每次打开卡片就会渲染内容；根据浏览器渲染管线的异步计算特性，为了提高性能，浏览器会进行预测性布局，假设超过最大高度，加载出滚动条，这个时候内容还没有加载出来；当内容加载出来触发重排，重新计算高度去除滚动条；这就导致了视觉上滚动条"闪现"

解决方案： 代码层面计算总高度，使用className动态生成类名

import cx form 'classNames';
import styles from './index.less';

<div className={cx(styles.tableDropdown, {[styles.overflowDropdown]: options.length * 22 > 400})}>
    {options.map(o => (<Checkbox>{o.label}</Checkbox>)}
</div>


// index.less
.overflowDropdown {
    height: 400px;
    overflow-y: auto;
}