Conflicting flex boxes in Vuetify layout components

Question

I am using Vuetify in a project, where I am unable to get a component to fill the remaining height of the screen.

It's a conflicting flexbox issue between the v-main & v-container components, because if i remove the v-main component then Row-2 successfully grows to fill screen height, however removing the v-main breaks the responsiveness in the rest of the layout.

https://codepen.io/deftonez4me/pen/LYZmOzy

What needs to be done to get Row 2 to fill the rest of the available height of the screen?

user_13175138 · Answer

You can add this to the css:

.v-main__wrap{
  display: flex;
}

That way your v-container will actually stretch to fill the space of the v-main.

https://codepen.io/ZachHaber/pen/NWrLXeV

user_818326 · Answer

Add this style rule to give the container 100% height:

.v-application .flex-nowrap{
  height:100%;
}

user_11281152 · Answer

Applying the following will also work

.v-main__wrap{
  display: inline-flex;
}

Conflicting flex boxes in Vuetify layout components

3 Answers