vue+element中一页面中多个子模块，设置子模块高度跟随父级自适应，并设置最小高度

在Vue.js结合Element UI构建应用时，如果要在单页内有多个动态高度的子组件（子模块），可以利用Element UI提供的`el-col`和一些自定义样式以及Vue的响应式特性来实现子模块高度的自适应和最小高度限制。

首先，在布局上，你可以使用`el-row`和`el-col`来创建网格系统，每个子模块作为`el-col`的子元素：

<template>
  <div class="parent-container">
    <el-row :gutter="20" class="parent-grid">
      <el-col v-for="(item, index) in modules" :key="index" :span="item.span" :style="{ minHeight: 'auto', maxHeight: 'calc(100% - var(--height-offset))' }">
        <child-module :data="item.data"></child-module>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modules: [
        { span: 8, data: ... }, // 子模块配置
        { span: 4, data: ... }
      ]
    };
  },
  computed: {
    heightOffset() {
      return 60; // 设置顶部或底部固定的偏移量，如头部导航栏高度
    }
  }
};
</script>

在CSS中，你可以定义`.parent-container`和`.parent-grid`的样式，同时使用`:not(:last-child)`伪类来避免最后一个子模块塌陷：

.parent-container {
  display: flex;
}

.parent-grid {
  flex-wrap: wrap;
}

.child-module {
  box-sizing: border-box;
  overflow-y: auto;
  min-height: calc(var(--height-offset, 0) + 50px); // 设置最小高度，这里50px是一个示例值
}