flex: 1与vxe-grid中的height: auto结合使用样式无法自适应问题

一般使用vxe-gird时为了保证表格高度自适应，即拖拽改变视口高度时，表格的高度也会随之放大/缩小，所以我一般会给vxe-grid外部的div设置height: 100%后，再给vxe-grid的配置项gridOptions中的height设置‘auto’来实现

但实际中，表格顶部有时会展示一些非表格数据，这是为了让表格继续实现自适应就要进行样式调整，(之前的帖子里有提到可以使用top插槽完成，这里使用有些不同，因此没有用插槽)

大致结构如下：

<template>
	<div class='box flex'>
		<div class='left w-[200px]'></div>
		<div class='right flex-1'>
			<div>...</div>
			<div>...</div>
			<div class='flex-1'>
				<vxe-grid :gridOptions="gridOptions"></vxe-grid>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data(){
		return {
			gridOptions:{
				height: 'auto'
			}
		}
	}
}
</script>

会发现当手动拖拽缩小视口高度时，表格的高度不会重新计算，因此只有首次计算的高度是正确的，后面表格的高度不会随着浏览器视口的高度缩小（发现放大没问题，只有缩小有问题）

解决：

保留flex-1

将height: 'auto’改为100%
或
强制vxe-grid重新计算高度

 mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
   methods: {
    handleResize() {
      // 在窗口调整时重新调整 grid 的高度
      this.$nextTick(() => {
        this.$refs.xGrid.updateData();  // 或者调用其他方法来强制刷新高度
      });
    }
  }

不保留flex-1
把class='flex-1’换成了style=‘height: calc(100% - 顶部内容高度)’

原因：
flex-1使得子元素自动填充剩余空间，但因为vxe-grid的高度被设置为auto，他的高度不会随着父元素变化而自动调整，这会导致他的高度在视口大小变化时不会重新计算，从而出现样式混乱
而height: calc(100% - 顶部内容高度)则通过明确计算使得高度与父元素的大小同步，因此在窗口拖拽时不会出现样式错误