vue-echarts高度缩小时autoresize失效

背景

项目中采用动态给x-vue-echarts style赋值width，height的方式实现echarts图表尺寸的改变
在这里插入图片描述

  <v-chart
	...
    autoresize
  ></v-chart>

给v-chart添加autoresize后，在图表宽度变化，高度增加时无异常，高度减小时图表并未缩小，反而被截断了

先说结论

添加全局样式进行覆盖

div.vue-echarts-inner {
  height: 100% !important;
}

原理

查看vue-echarts源码
在这里插入图片描述

这里的inner以及useAutoresize中的root值为该dom节点

所以实际上是在监听div.vue-echarts-inner这个dom节点的尺寸变化，从而去给inner的子盒子设置width和height

下面是父盒子的css属性

下面是inner的css属性

问题就在于flex和height auto

父盒子为flex盒且flex-direction为column，子盒子设置flex-grow:1，那么子盒子会填满父盒子的高度
父盒子设置高度为height:auto，那么高度会以其子盒子内容高度为准，也就是子盒子是300px，就会把该盒子高度撑到300px

但两者在一块就有冲突
这里分为父，子，孙三个盒子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      display: flex;
      flex-direction: column;
      background-color: red;
      width: 500px;
      height: 500px;
    }

    .me {
      flex: 1;
      width: 300px;
      background-color: green;
      height: auto;
    }

    .son {
      width: 100px;
      background-color: blue;
      height: 500px;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="me">
      <div class="son"></div>
    </div>
  </div>
</body>

</html>