我有一个典型的布局，上面/中间/下面的部分。最下面的部分是绝对的。中间部分似乎长在底部后面。换句话说，我看不到中间部分完整的边框，因为底部部分遮盖了它。

有没有一种方法可以让弹性和绝对共存，并按我所希望的那样工作？

https://codepen.io/uglyHobbitfeet/pen/mweblwj

<div id="app">
  <v-app id="inspire">
    <v-card class="d-flex flex-column overflow-hidden" height="100vh" width="100%">
      <span class="flex-shrink-1" style="border:1px solid pink;">
        <v-system-bar height="20">V-SYSTEM-BAR</v-system-bar>
        <v-app-bar dense flat>
          <v-spacer></v-spacer>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-app-bar>
      </span>
      <v-card-text class="flex-grow-1 overflow-hidden" style="border:1px solid yellow;background-color:green">V-CARD-TEXT
      </v-card-text>
      <v-bottom-navigation height="20" class="flex-shrink-1" absolute style="border:1px solid red;background-color:pink">V-BOTTOM-NAVIGATION
      </v-bottom-navigation>
    </v-card>
  </v-app>
</div>```