故事背景

根据需求写了一个轮播图，无意中发现了一个现象，容器会随着内容切换会带着页面一起反复横跳，如下图所示

初步调试

观察了一下，应该是因为其中一组数据的内容文字显示为4行，但是其他组数据显示出来是3行，因为尝试随机删除几个div，其中删除了左侧底部文案之后问题消失。

为了更好调试，我将这个组件单独抽离成一个demo，各位有兴趣可以去尝试一下

一开始感觉是css问题，所以尝试了增加overflow:hidden等操作，但是失败了，无奈求助了群友。

首先咨询了一下茂茂，发现给文案设置固定高度可以解决问题。这时有一位群友Himawari给出了一个方案: 给底部文案的外部div增加一个key。尝试了一下圆满解决问题。同时另一位群友$也给出了另一个方案：将底部文案内部套一个position:absolute的div。

在谢过三位热心群友后，我复盘了一下，感觉依然没有找到根本原因，于是直接和三位群友讨论了起来。大家根据开发经验聊了一番之后，聚焦到了增加key的方案上。为什么简单增加了key就可以解决呢？Himawari的解释是说观察现象感觉像是dom被复用了，所以尝试加了个key字段，发现解决了问题。

所以问题就变成了，为何复用了flex布局的dom之后会发生上述的现象？

我尝试用flex reflow update等关键词去谷歌了一下，很快有了发现

原来很多年前就有人发现了flexbox并不会在内容变化之后重新渲染当前flexbox，不过7年前的问题，里面还有Dan大佬回复说chrome35看起来没问题，理论上说应该已经修复了才对。

于是我跳出了vue，用原生又尝试了一次，发现上面发现的问题还是存在，并且看现象貌似有一个scroll into view的动作（页面稍微向下滚动一些之后，可以明显观察到该现象）。传送门

综上所述，未来在使用flex布局的时候，要多注意是否会有dom复用的问题，如果有类似问题出现，尝试增加key，或者原生环境下尝试触发回流重绘便可以解决。毕竟现在布局用flex的场景还挺多的。

另外，其实这个问题到目前依旧没有找到根本原因，也是只猜测是浏览器行为导致，希望感兴趣的同学有条件的话多做尝试，看看在其他浏览器中是否会有相同的问题(ps:我用chrome mobile试了是ok的)

最后，希望有大佬可以终结这个问题 HELP WANTED