Element-UI 導航菜單，部分貼底

以下圖，導航一二三四的高度小於 100% 時，接口文檔貼底，大於 100% 時，接口文檔顯示在最底端。

其實相似於 Footer Stick，可是因爲導航菜單子組件的某些屬性，已有的 Footer Stick 解決方案並不能解決我遇到的這個問題。

// template
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :collapse="collapse"
      :background-color="'#324157'"
      :text-color="'#fff'"
      :active-text-color="'#20a0ff'"
      unique-opened
      router
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>導航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分組一</template>
          <el-menu-item index="1-1">選項1</el-menu-item>
          <el-menu-item index="1-2">選項2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分組2">
          <el-menu-item index="1-3">選項3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">選項4</template>
          <el-menu-item index="1-4-1">選項1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">導航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">導航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">導航四</span>
      </el-menu-item>
+      <!-- 空元素用來讓接口文檔部分貼底 -->
+      <li style="flex:1;"></li>
+      <el-menu-item>
+        <router-link to="/doc" target="_blank" class="doc">
+          <i class="el-icon-tickets icon" style="'color:#455368'"></i>
+          <span>接口文檔</span>
+        </router-link>
+      </el-menu-item>
    </el-menu>
  </div>

.sidebar {
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 0;
  }
  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
    display: flex;              // 注意
    flex-direction: column;     // 注意
  }
  > ul {
    height: 100%;
    .doc {
      flex: 0 0 56px;           // 注意
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: 100%;
      align-items: center;
      font-size: 14px;
      color: #fff;
      > .icon {
        width: 24px;
        font-size: 18px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
}