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:
I have updated the CodePen, you can check it out
Here’s the new CSS:
height: 100% !important;
/* max-height: 100%; */
/* NEED THIS FOR THE SOLUTION */
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.
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
<v-app-bar app dense color="primary">
<div class="d-flex flex-column full-height">
<!-- TOOLBAR AND SHIZZ -->
<v-row no-gutters class="flex-grow-0 flex-shrink-1">
<v-toolbar color="secondary" dense>
<!-- Content -->
class="d-flex flex-column flex-grow-1 ma-4"
<!-- Menu Component for column -->
class="d-flex flex-wrap justify-center card-body ml-3 mr-1"
:class="$vuetify.theme.dark ? 'card-body-dark' : 'card-body-light'"
v-for="item in 50"
:color="$vuetify.theme.dark ? 'card lighten-1' : ''"
Omae Wa Mou Shindeiru! Omae Wa Mou Shindeiru!
Here’s the CSS
height: 100% important;
Questions seeking code help must include the shortest code necessary to reproduce it
Hey I added the code, also I checked the link and it still has a scroll bar on the main page and not the body of the ‘card’