How to prevent <v-responsive> from growing with content?

In my Vue.js application (with vuetify) I want a v-sheet with (√2)/2 aspect ratio (width/height = (√2)/2). In this v-sheet, I have some content that can grow but I don't want the v-sheet to grow with its content. According to vuetify documentation, aspect-ratio : "Sets a base aspect ratio, calculated as width/height. This will only set a minimum height, the component can still grow if it has a lot of content."

I did some tests with codepen and came up with this POC (working better with chrome, firefox does not always respect the ratio but thats another issue) : https://codepen.io/Achaaab/pen/zYOpmbJ.

<v-app id="app">
  <v-content fill-height>
    <v-container fill-height fluid>
      <v-row>
        <v-col cols="6">
          <v-sheet tile elevation="4">
            <v-responsive aspect-ratio="0.707">
              <div class="sheet-content">
                <div class="header"></div>
                <v-textarea class="body" auto-grow hide-details></v-textarea>
                <div class="filler"></div>
                <div class="footer"></div>
              </div>
            </v-responsive>
          </v-sheet>
        </v-col>
        <v-col cols="6">
          <v-sheet tile elevation="4">
            <v-responsive aspect-ratio="0.707">
              <div class="sheet-content">
                <div class="header"></div>
                <div class="body" :style="bodyStyle"></div>
                <div class="filler"></div>
                <div class="footer"></div>
              </div>
            </v-responsive>
          </v-sheet>
          <v-slider v-model="height" min="0" max="150" label="body height %"></v-slider>
        </v-col>
      </v-row>
    </v-container>
  </v-content>
</v-app>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      height: 20
    }
  },
  computed: {
    bodyStyle() {
      return "height: " + this.height + "% !important";
    }
  }
})

.sheet-content {
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.sheet-content > .header {
  width: 100%;
  height: 10%;
  background-color: #C0C0C0;
  flex: 0 0 auto;
}
.sheet-content > .body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #E0E0E0;
  flex: 0 0 auto;
}
.sheet-content > .filler {
  width: 100%;
  flex: 1 0 auto;
}
.sheet-content > .footer {
  width: 100%;
  height: 10%;
  background-color: #C0C0C0;
  flex: 0 0 auto;
}

I made 2 sheets, the left one contains a v-text-area that can grow. The right one contains a div that can grow up to 150% with a slider.

Surprisingly, the right sheet does not grow with content. According to vuetify documentation, the left sheet grows with content.

How can I have the same behavior on the left sheet ? (some kind of overflow: hidden).

After many years it seems that both sheets have now the same behavior. I consider this issue resolved.