Dynamic Flex Item height in a flex grown flex-box container

So I am trying to build a kanban like layout (with Vue and Vuetify) that has lists that grow with their content but then stop growing the moment they reach the end of their container (the container would be the remaining size of the screen) and put in an overflow-y inside the column's div.

Here is the reproduction link: https://codesandbox.io/s/dear-god-in-heavens-o55oz

I have tried to make it look as similar to what I have in my own project at the moment.

Here's what you can see in the reproduced link:

• The container inside src/components/common/ListsContainer.vue is a flex-grow flex item. I need this because I want this container to automatically take the remaining height of the screen because the wToolbar will have an extension slot that will change its height. I might also introduce new changes to it therefore it would be much more simpler if the container of the columns has a dynamic height.

• The columns inside ListsContainer.vue stretch the parent container when the contents are too much, the only way I can control it is by adding a calc(100vh - XXrem) value to the container and the columns to control their height. You can see that I have commented out my calc values inside src/assets/css/custom.css in lines 19 and 24 to demonstarte the overflow of the columns from the screen.

The reason I dont want to use calc is because

• calc doesnt react nicely inside an iPad and I have to introduce different calc values just to contain the columns, I have checked that different devices calculate the height differently (I checked in actual iPads since Chrome's simulator works flawlessly which isnt the case in the actual device)

• When the wToolbar is extended, the calc doesnt respond and it pushes it down the page, I would like to keep the overflow-y disabled in this page.

So can you guys let me know how I can set my flex-box settings so that everything is contained the way I am trying to?