Chart resize is not correct in some case of flex box layout.

### Version
4.5.0

### Steps to reproduce
Check it please: https://jsfiddle.net/6s4odwtu/

```html

.container {
/* width: 500px; */
display: flex;
border: 1px solid red;
padding: 5px;
}
.left {
position: relative;
height: 300px;
flex: 0.5;
border: 1px solid green;
}
.right {
position: relative;
height: 300px;
flex: 1;
border: 1px solid blue;
}
.chart {
width: 100%;
height: 100%;
/* left: 0;
top: 0; */
position: relative;
}
#info {
position: fixed;
background: #000;
border: 2px solid #eee;
right: 10px;
top: 10px;
padding: 5px;
width: 130px;
height: 100px;
color: #fff;
box-shadow: 0 0 5px #000;
font-size: 12px;
z-index: 9999;
}

container: 700px
container: 500px

var expandBtn = document.getElementById('expand');
var collapseBtn = document.getElementById('collapse');
var container = document.getElementById('container');

expandBtn.onclick = function () {
container.style.width = '700px';
resize();
};
collapseBtn.onclick = function () {
container.style.width = '500px';
resize();
};

var option;

option0 = {
xAxis: {},
yAxis: {},
series: {
type: 'line',
data: [[11, 22], [33, 44]]
}
};
option1 = {
xAxis: {},
yAxis: {},
series: {
type: 'line',
data: [[11, 22], [33, 44]]
}
};

var main0 = document.getElementById('main0');
var main1 = document.getElementById('main1');
var main0Box = document.getElementById('main0-box');
var main1Box = document.getElementById('main1-box');
var chart0 = echarts.init(main0);
var chart1 = echarts.init(main1);
function resize() {
console.log('before resize, main0Box', main0Box.offsetWidth);
console.log('before resize, main1Box', main1Box.offsetWidth);
chart0.resize();
chart1.resize();
console.log('after resize, main0Box', main0Box.offsetWidth);
console.log('after resize, main1Box', main1Box.offsetWidth);
};
chart0.setOption(option0);
chart1.setOption(option1);

```

### What is expected?
Resize correct.

### What is actually happening?
Resize not correct.

The reason seams to be:
echarts(zrender) set the "width/height" manually on its root dom element,
and try to set `domRoot.style.display = 'none';` in `Painter.js#resize`.

That does not work in the case above:
If there are more than one echarts instance and the echarts element is `position: relative`,
set `width/height` and `display:none` one by one influence the layout of flex box.
In the above case, it firstly call `chart.resize()` on the first chart. And then the chart set its
`domRoot.style.display = 'none';`. But the second chart still have its `width/height` set on
its dom root. Thus the `offsetWidth` the first chart fetched is different from the final width of its parent dom.

So, do we really need to manually set `width/height` on echarts root dom in zrender?
If we do it, it might influence the layout in some cases.