Flexible layout with hide/show of panel - vue.js

Question

We want to set up a UI like this, where A cards are shown by default, and if needed B shows on the right side:
Before:
┌────────────────────┐
│┌───┐┌───┐┌───┐┌───┐│
││A ││A ││A ││A ││
│└───┘└───┘└───┘└───┘│
└────────────────────┘
After:
┌────────────────┐┌──┐
│┌──┐┌──┐┌──┐┌──┐││ │
││A ││A ││A ││A │││B │
│└──┘└──┘└──┘└──┘││ │
└────────────────┘└──┘
So note in the beginning, the container for the A cards take up the full width, then when B shows, the A cards shrink a bit in width, and B takes up about 1/6 of the width.
This is how v-container, v-layout, v-flex etc. are set up right now:
<v-container fluid>
<v-layout>
<v-flex>
<v-card>
<v-container fluid grid-list-xl>
<v-layout row wrap>
<v-flex xs6 sm4 md3 lg2 xl1 v-for="record in records" :key="record.id">
<v-card flat tile>
<!-- "A" code -->
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
<v-flex v-show="showPanel">
<v-card>
<!-- "B" code -->
</v-card>
</v-flex>
</v-layout>
</v-container>
The way the code runs now is that it shows "Before" okay, but for "After" it shows just a thin column for B like 1/12 of the width of the screen, and the As squeeze in just a bit. Anything I do to change the width of B just screws up the layout completely, like takes 50% of the width, or has As showing in three or fewer columns instead of four.
I think my structure might be fundamentally wrong, but I'm having a hard time wrapping my head around how v-container, v-layout, and v-flex are supposed to work, and the documentation is not helpful.

Answer 1

Confirmed it was the fluid in the line <v-container fluid grid-list-xl> that was causing troubles. Once I removed it, layout was as expected. The problem couldn't be duplicated in CodePen likely because the template was rendered in another environment with its own layout rules, so whatever conflict there was showed up only in that context.