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

Question

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).