一、问题背景
页面整体是左右布局，用了flex布局。左边模块宽度用了flex-basis固定宽度，右边直接flex:1。右边的图表是动态渲染的，选择多个巡检指标，动态绘制多个图表。
二、问题表现
图表需要根据窗口大小自适应。在组件中监听了window.resize事件，resize事件中调用了图表实例的resize事件，发现图表实例的resize事件调用成功。在窗口放大下表现正常，窗口缩小下图表并没有相应缩小，还是之前那么大，如果页面上只选了一个指标，只渲染一个图表，缩小情况下也正常。
三、解决步骤
第一步、多图表调用resize方法是一个一个遍历调用的，以为是第一个实例在resize时，后面的实例还没有resize,宽度还是比较大，撑开了整个布局，造成第一个实例在resize时取的宽度还是之前的宽度。然后想到在图表调用resize之前先隐藏所有图表，等所有实例都resize成功后再显示图表。此方法并没有解决上面的问题。
第二步、因为之前遇到过flex布局下el-table宽度也不能自适应，想到会不会是外层flex布局影响，然后把flex布局改成了浮动布局后问题解决了。
四、引发原因
通过查阅flex规范：
1）在非滚动容器中，主轴方向flex-item的尺寸是基于内容的最小尺寸，此时 min-width 的值是auto。
2）对于滚动容器，min-width 的值是 0（默认讨论水平布局）
所以我们给item增加min-width：0，这个时候item会按照预期缩小，给item增加overflow:auto或者overflow：hidden也可以达到目的
