Vuetify grid height one row that grows and one fixed at the bottom

user_4863919 0
Viewed 410

I'am implementing Vuetify Flex for my grid rows but having trouble with the classes.

There is two v-row in this container, I want the first to grow all all available height and keep the second one at the bottom but still showing.

Picture of what I want: enter image description here

code

This is my codepen so far: https://codepen.io/5less/pen/mdWpjWR

flexbox vuetify.js css
1 Answers

depending on what you're trying to achieve there may be different solutions, but based on what is shown in the picture you can use style="height: 90vh" for the first v-row and style="height: 10vh" for the second one. check out the code below and see if it helps:

// you can ignore this line
Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
.br {
  border: 2px solid red;
}

.bb {
  border: 2px solid blue;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row class="br" style="height: 90vh"></v-row>
        <v-row class="bb" style="height: 10vh"></v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

user_120789420
Related