QSplitter full height? Easier method?

[Codebreaker101]

I have this structure something like this: Dialog (maximized) > Card > CardSection > Card > CardSection > Stepper > TabPanel > Splitter > Before > div.content

I need content in before to be centered vertically as well as horizontally and for the after I need it to fill the remaining height and have its own scroll window.

I'm trying to avoid writing a lot of CSS and overriding a lot of quasar classes and I'm looking if there is an easier method to achieve this?

Demo: https://codesandbox.io/s/dawn-water-7qex6?file=/src/pages/Index.vue