I managed to do this with something very simple and I have literally NO IDEA how its working. Honestly speaking it was through trial and error.

All I needed was: flex-basis: 0

I have updated the CodePen, you can check it out

Here’s the new CSS:

html,
body {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.full-height {
  height: 100% !important;
}

.card-body {
  overflow-y: auto;
/*   max-height: 100%; */

/*   NEED THIS FOR THE SOLUTION */
  flex-basis: 0;
}

I am kinda in a dilemma where I have to contain a flex-child of a flex-child not to overflow the parent i.e. not to increase more than the screen height/the height of the parent (which itself is a flex-child)

Here’s is the CodePen for it.

I have tried to replicate the HTML according to the Vue project I am using, and this is more or so the layout I currently have.

Goal: The div with class=card-body which contains a bunch of smaller v-card elements is a child of a flex-child itself. I have to make sure it doesn’t overflow the screen and gets an overflow instead. I couldn’t find something that would help me in this regard. I really dont want to use calc because I want flexbox to dynamically handle it, if possible.

Here’s the HTML

<div id="app">
  <v-app id="inspire">
    <v-app-bar app dense color="primary">
      <v-toolbar-title class="white--text">
        App Title
      </v-toolbar-title>
    </v-app-bar>
    <v-content>
      <div class="d-flex flex-column full-height">
        <!-- TOOLBAR AND SHIZZ -->
        <v-row no-gutters class="flex-grow-0 flex-shrink-1">
          <v-col cols="12">
            <v-toolbar color="secondary" dense>
              <v-toolbar-title class="white--text">
                Some title
              </v-toolbar-title>
            </v-toolbar>
          </v-col>
        </v-row>

<!-- Content -->
          <v-card
    color="column"
    class="d-flex flex-column flex-grow-1 ma-4"
  >
    <v-card-title class="title-1">
      LMAO

      <v-spacer></v-spacer>
      <!-- Menu Component for column -->
      ICON
    </v-card-title>

    <div
      class="d-flex flex-wrap justify-center card-body ml-3 mr-1"
      :class="$vuetify.theme.dark ? 'card-body-dark' : 'card-body-light'"
    >
      <v-card
        v-for="item in 50"
        :key="item"
        class="mr-4 mb-3"
        :color="$vuetify.theme.dark ? 'card lighten-1' : ''"
      >
        <v-card-text class="title">
          Omae Wa Mou Shindeiru! Omae Wa Mou Shindeiru!
        </v-card-text>
      </v-card>
    </div>
  </v-card>

      </div>
    </v-content>
  </v-app>
</div>

Here’s the CSS

html,
body {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.full-height: {
  height: 100% important;
}

.card-body {
  overflow-y: auto;
  max-height: 100%;
}