How to have q-card take full height in q-splitter, in Quasar

We have a Vue/Quasar based project and in one of the pages want to have a splitter, with two panes, where the content takes full height in each. Right now they occupy minimal height.

    <q-splitter 
      v-model="splitterModel"
      style="height: 100%; width: 100%"
      class="no-margin full-height"
      before-class="left-pane no-margin full-height"
      after-class="right-pane no-margin full-height"
    >
    <template v-slot:before>
      <q-card class="left-pane-content no-margin full-height">
        LEFT
      </q-card>
    </template>
    <template v-slot:after>
      <q-card class="right-pane-content no-margin full-height">
        RIGHT
      </q-card>
    </template>
    </q-splitter>

.left-pane {
    background: pink;
    height: 100%;
  }
  .right-pane {
    background: pink;
    height: 100%;
  }
  .left-pane-content {
    background: #efefef;
    height: 100%;
  }
  .right-pane-content {
    background: green;
    height: 100%;
  }

The parent of the q-splitter is a q-page with the following CSS:

  display: block;
  background: yellow;

Sample of the current output, where we want both the 'LEFT' and 'RIGHT' q-cards taking up full height, and eventually being individually scrollable.

OK, lost two hours on this, found a solution but I'm not happy why it works :-).
Maybe some CSS guru can chime in.
Here goes: you actually have to unset the 100% height on the right split pane! That is bcs 100% height only works if the parent has a defined height, otherwise it kind of works exactly the opposite.

But if you unset it, and set the 100% height on the q-card inside it, you'll get two vertically equally q-cards.

Here is a stripped down solution:

<q-splitter  
  before-class="q-pa-xs"
  after-class="unsetHeight q-pa-xs"
>
  <template v-slot:before>
    <q-card bordered >
      <q-card-section>
       something tall here
      </q-card-section>
    </q-card>
  </template>
  <template v-slot:separator></template>
  <template v-slot:after>
    <q-card bordered class="fit">
      <q-card-section>
        same height here
      </q-card-section>
    </q-card>
  </template>
</q-splitter>

<style>
  /* BTW, scoped is not working here :-( */
.unsetHeight {
  height: unset !important;
}
</style>

So, two things:

• unset height
• fit on q-card