[RFC] Resize correctly when the charts are laid out with CSS grid or flex.

Here are some issues that report incorrect resizing in the CSS `grid` or `flex` layout.

- #6048 (flex)
- #11791 (flex)
- #12170 (grid)
- #13004 (grid)

This problem may be caused by the width/height set previously on the root element of the instances. The specified value will affect the final height of their parent element. So we may need to hide first other instances before resizing to solve this issue. But I'm not quite sure that we should do this in zrender or by the developer.

If just by the developer, please refer to the following demos.

- https://codepen.io/plainheart/pen/yLagoGW (#12170)
- https://codepen.io/plainheart/pen/VwKPzpj (#13004)

Otherwise, some changes need to be applied to the [`resize`](https://github.com/ecomfe/zrender/blob/master/src/zrender.ts#L302-L313) function of zrender.

**Proposed Changes 1**
```ts
/**
* Resize the canvas.
* Should be invoked when container size is changed
*/
resize(opts?: {
width?: number| string
height?: number | string
}) {
opts = opts || {};
+ let rootDisplay: {[index: number]: string} = {};
+ // if there are multiple instances, hide other instances first.
+ zrUtil.each(instances, zr => {
+ if (zr !== this) {
+ const style = zr.painter.getViewportRoot().style;
+ rootDisplay[zr.id] = style.display;
+ style.display = 'none';
+ }
+ });
this.painter.resize(opts.width, opts.height);
this.handler.resize();
+ // restore the previous display
+ zrUtil.each(instances, zr => {
+ zr !== this && (zr.painter.getViewportRoot().style.display = rootDisplay[zr.id]);
+ });
}
```

For #11791

https://user-images.githubusercontent.com/26999792/103193564-c306a480-4917-11eb-83bb-ca8424f978e4.mp4

**Proposed Changes 2**

Set the inner chart container's position to `'absolute'` and fill the parent chart container.