Vuetify - how to split elements on multiple columns?

Hi everyone,

this may sound (and, hopefully, it is) a silly question, but I would like to be able to set a maximum height on a container, based on the maximum height of the window, because I would like to split an array of element among 3 or more columns, without knowing how many elements a column may fit.

not sure this is clear, but here is some code.

this is the router:

<template>
  <v-app>
    <v-content>
      <v-container fluid>
        <v-tabs v-model="tab" fixed-tabs background-color="primary">
          <v-tab v-for="item in items" :key="item.tab" :to="item.route">
            {{ item.tab }}
          </v-tab>
          <v-tabs-items v-model="tab">
            <v-tab-item v-for="item in items" :key="item.tab" :id="item.route">
              <keep-alive><router-view v-if="tab === item.route"/></keep-alive>
            </v-tab-item>
          </v-tabs-items>
        </v-tabs>
      </v-container>
    </v-content>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { tab: "Lines", route: "/pl" },
        { tab: "Operators", route: "/op" },
        { tab: "Team", route: "/" }
      ],
      tab: null
    }
  },
  created() {
    this.$store.dispatch("fetchOperators")
    this.$store.dispatch("fetchOrders")
  }
}
</script>

and Team component is this one:

<template>
    <v-row dense>
      <v-col cols="9">
        <v-expansion-panels multiple>
          <v-expansion-panel
            elevation="2"
            v-for="order in orders"
            :key="order.line + order.sku"
            class="pa-2"
          >
            <v-expansion-panel-header>
              <v-progress-linear height="40">
                {{ order.line }} - {{ order.sku }}
              </v-progress-linear>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <Order :order="order"> </Order>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-col>
      <v-col cols="4">
          <v-list elevation="2">
            <Operator
              v-for="operator in operators"
              :key="operator.id"
              class="pa-1 ma-1"
              :operator="operator"
            ></Operator>
          </v-list>
      </v-col>
    </v-row>
</template>

<script>
import Operator from "@/components/Operator.vue"
import Order from "@/components/Order.vue"
import { mapState } from "vuex"

export default {
  name: "Team",
  components: {
    Operator,
    Order
  },
  computed: mapState(["operators", "orders"])
}
</script>

<style></style>

now, as I have a lot of operators, I would like them to be listed among at least 3 columns, do you think this is possible?

thanks for your help and sorry if this is not the right place to ask.

hi everyone,
probably bad formulated question, let me try again.

this -> https://medium.com/@simoncmason/splitting-columns-in-vue-js-404b533fd8f is what I would like to achive, but in a more “dynamic” way.

do you think there is any way? Or my only option is to get the size of the page on every resize?