Seeking assistance with creating a simple layout utilizing the Vuetify grid system. The goal is to have a row that fills up the minimum space and another row that takes up 100% of the remaining space.
Current Layout: https://i.sstatic.net/DyDeJ.png Desired Layout: https://i.sstatic.net/boX0E.png
Any guidance on achieving this layout would be greatly appreciated.
<div id="app">
<v-app id="inspire">
<v-container class="pa-0" fluid style="background-color: purple;">
<v-row style="background-color: yellow;">
<v-col cols=6 style="background-color: blue;">
<v-card style="background-color: red;">small A</v-card>
</v-col>
<v-col cols=6>
<v-card style="background-color: red;">small B</v-card>
</v-col>
</v-row>
<v-row style="background-color: yellow;">
<v-col cols=12 style="background-color: green;">
<v-card style="background-color: red;">big</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Codepen Link: https://codepen.io/caeycae/pen/YzWyRrW