问一个flex-grow和echarts的样式问题？

Question

今天上班画页面时发现一个诡异的问题；

当两个echars图表都有flex-grow:1时，图表样式会发生错乱，高度根本对不上：在线示例

只要把其中一个echarts图表的flex-grow去除，换成height:50%就可以了，也就是说不能同时存在两个flex-grow:1，为啥呢？

Answer 1

直接flex: 1或者加个flex-basis: 0也行

我猜测是chart1加载后，div1的自身原高度变为250px，导致parent的剩余可分配空间变小，div2的实际高度会从250px减小，导致chart2加载时获取的高度不是期望的250px

不过按我这么分析，应该是div1高375px，div2高125px才对，实际是312.5和187.5，估计是chart2加载完后，div2自身原高度变为125px，然后parent的可分配空间变为500-250-125=125px，均分一下两个都加上72.5px了

Answer 2

不清楚你为什么想要使用 flex-grow:1 是想要两个图标平分高度吗？如果是这样的话，使用 flex:1 就行。