Autoresize does not work when container is grid

Confirmation

• I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

+-- @tanstack/vue-table@8.5.22
| `-- vue@3.2.45 deduped
+-- @vitejs/plugin-vue@3.2.0
| `-- vue@3.2.45 deduped
+-- @vueuse/core@9.5.0
| +-- @vueuse/shared@9.5.0
| | `-- vue-demi@0.13.11
| |   `-- vue@3.2.45 deduped
| `-- vue-demi@0.13.8
|   `-- vue@3.2.45 deduped
+-- echarts@5.4.0
+-- floating-vue@2.0.0-beta.20
| +-- vue-resize@2.0.0-alpha.1
| | `-- vue@3.2.45 deduped
| `-- vue@3.2.45 deduped
+-- pinia@2.0.27
| +-- vue-demi@0.13.6
| | `-- vue@3.2.45 deduped
| `-- vue@3.2.45 deduped
+-- sortablejs-vue3@1.2.3
| `-- vue@3.2.45 deduped
+-- vue-echarts@6.2.3
| +-- echarts@5.4.0 deduped
| +-- vue-demi@0.13.5
| | `-- vue@3.2.45 deduped
| `-- vue@3.2.45 deduped
+-- vue-router@4.1.3
| `-- vue@3.2.45 deduped
`-- vue@3.2.45
  `-- @vue/server-renderer@3.2.45
    `-- vue@3.2.45 deduped

Details

The autoresize does not work when the containing element has display:grid set and the window is resized to be smaller. It only kind of works when the size increases.

Reproduction

https://stackblitz.com/edit/vue-echarts-vue-3-dfksyi?file=src%2FApp.vue

[Justineo]

If you are using an external resize observer library, you may want to disable the built-in autoresize as you’ll end up calling chart.resize() twice in many cases.

[Justineo]

Try add this in your CSS to workaround the issue:

x-vue-echarts {
  overflow: hidden;
}