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

• flex布局echarts缩放问题(bug?) #6048 (flex)
• Chart resize is not correct in some case of flex box layout. #11791 (flex)
• 在css网格布局中，resize无效 #12170 (grid)
• Multiple Charts Will Grow but Not Shrink In A 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 (在css网格布局中，resize无效 #12170)
• https://codepen.io/plainheart/pen/VwKPzpj (Multiple Charts Will Grow but Not Shrink In A Grid #13004)

Otherwise, some changes need to be applied to the resize function of zrender.

Proposed Changes

/**
* 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

1.mp4

Any idea is appreciated. Thanks.