I am facing a challenge where I need to prevent a flex-child of another flex-child from overflowing the parent, ensuring it does not exceed the screen height or the height of the parent (which is also a flex-child).
Here's the CodePen link for reference.
I have attempted to replicate the HTML structure in line with the Vue project I am working on, and this represents the current layout I have.
Objective: The div element with class=card-body, containing multiple smaller v-card elements, is itself a child of a flex element. My goal is to ensure that it does not overflow the screen but instead gets an overflow setting. I haven't come across a solution that addresses this specifically. I prefer avoiding the use of calc as I want the flexbox to handle it dynamically, if possible.
Below is the outlined HTML structure:
<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>
The CSS styling used is as follows:
html,
body {
overflow-y: auto;
width: 100%;
height: 100%;
}
.full-height: {
height: 100% important;
}
.card-body {
overflow-y: auto;
max-height: 100%;
}