Vuetify2 grid layout

How would I implement the layout below in Vuetify2? The widths of C and D should be equal 50-50, regardless of content. The heights of A and B should wrap their contents. The height of C should stretch to fill available space. The contents of C should be scrollable, while the rest of the page should NOT be scrollable.

Actually, you do not have to use the vuetify layout.

Here is a layout based on vuetify2 grid system:

https://codepen.io/ramseyfeng/pen/MWMvqXM

<div id="app" class="h-full">
  <v-app id="inspire" class="h-full">
    <v-layout class="grey lighten-5 flex-column h-full border">
      <v-row class="flex-grow-0 border my-0">
        <v-col>
          A
        </v-col>
      </v-row>
      <v-row class="flex-grow-1 overflow-auto my-0">
        <v-col cols="6" class="d-flex flex-column h-full border">
          <v-row class="flex-grow-0 border">
            <v-col>
              B
            </v-col>
          </v-row>
          <v-row class="flex-grow-1 overflow-auto border">
            <v-col>
              <div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>C</div><div>CA</div>
            </
            </v-col>
          </v-row>
        </v-col>
        <v-col cols="6">
          D
        </v-col>
      </v-row>
    </v-layout>
  </v-app>
</div>

CSS

html,body {
  height: 100%;
}
.h-full {
  height: 100%;
}
.border {
  border: 1px solid silver;
}