The css style page does not take full effect when it is loaded for the first time

problem description

first of all, the page is implemented by vue+elementUI, and there are two problems:

one is that el-scroller (a hidden component in elementUI) is not activated when the content wrapped in the < el-scroller > tag is out of range when the page is first loaded.
one is the vertical center of the child element

the environmental background of the problems and what methods you have tried

these effects are not displayed when they are loaded for the first time, and the console properties have indeed been read, but only after the navigation bar tab has been switched, can these two problems return to normal (or achieve the planned effect)

related codes

//el-scroller
<el-scrollbar style="height:100%">
     <el-tree :data="data5" 
      ref = "tree"
      node-key="id" 
      default-expand-all 
      :props="defaultProps"
      :expand-on-click-node="false" 
      :filter-node-method="filterNode"
      highlight-current = true
      @current-change="getCurrentNode">
          <span class="custom-tree-node" slot-scope="{ node, data }">
              <span> <i :class="node.icon"></i>{{ node.label }}</span>
          </span>
      </el-tree> 
</el-scrollbar>

//
        <el-container>
            <el-aside width="240px">
                 <!-- <auth-left></auth-left> -->
                 <file-nav id="fileNav"></file-nav>
            </el-aside>
            <el-main id="main">
                <div class="option" >
                    <el-row type="flex" justify="center" >
                        <el-col :span="12"><h1>:</h1></el-col>
                    </el-row>
                    <el-row :gutter="30" type="flex" justify="center">
                        <el-col :span="6">
                            <el-card shadow="hover">
                            <div><i class="el-icon-info iconLogo"></i><span class="title"></span></div>
                            <div class="note"> </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover">
                            <div><i class="el-icon-info iconLogo"></i><span class="title"></span></div>
                            <div class="note"> </div>
                            </el-card>
                        </el-col>
                    </el-row>  
                </div>
                <router-view></router-view>              
            </el-main>
        </el-container>
//.option.el-main

.option{
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

expected results

expected results are shown in the figure

to patiently see the big people down on their knees to check for a long time did not find the solution, do not know what the problem is. Ask for advice orz