echart使用flex布局实现高度自适应遇到的问题

开发react组件，插入echart图表实现高度自适应时遇到的问题
代码大致如下：

<div style={{ width: '100%', height: '100%', textAlign: 'left', display:'flex',flexDirection:'column' }}>
<div>d1</div>
<div>d2</div>
<div style={{ flex:'auto'}}><ReactEcharts style={{height:'100%'}}/></div>
</div>

google浏览器显示的画面，echart图高度变成了100px
参考 网上的资料找原因：

https://www.geek-share.com/detail/2732701578.html
https://github.com/hustcc/echarts-for-react/issues/193

为什么父容器没有高度呢？父容器中使用了flex布局，查询flex:‘auto’，如下:
https://segmentfault.com/q/1010000004080910/a-1020000004121373

查询flex-basis:auto的作用，参考如下：
https://github.com/FormidableLabs/radium/issues/866

修改代码，将

<div style={{ flex:'auto'}}><ReactEcharts style={{height:'100%'}}/></div>

<div style={{ flex:'1'}}><ReactEcharts style={{height:'100%'}}/></div>