<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container>怎么实现主体部分高度自适应

在这个嵌套的 `el-container` 中，主体部分是 `el-main`，如果需要让 `el-main` 部分高度自适应，可以通过设置 `flex` 属性来实现。

具体步骤如下：

1. 给最外层的 `el-container` 设置样式，让其占满整个页面：

.el-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

这样就使得 `el-container` 占满了整个视口，并且使用了 `flex` 布局。

2. 给 `el-main` 设置 `flex` 属性，并设置 `overflow-y: auto` 让其溢出时出现纵向滚动条：

.el-main {
  flex: 1;
  overflow-y: auto;
}

这样就能让 `el-main` 部分高度自适应，并且出现滚动条。

最终的代码如下：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main class="main-content">Main</el-main>
  </el-container>
</el-container>

.el-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-main {
  flex: 1;
  overflow-y: auto;
}

这样就实现了 `el-main` 部分高度自适应的效果。