CODEWITHSUNDEEP
vuejs2flexboxvuetify.js
VerySeriousSoftwareEndeavours
VerySeriousSoftwareEndeavours

Reputation: 1753

Conflicting flex boxes in Vuetify layout components

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?

Upvotes: 2

Views: 811

Answers (3)

Amaarockz
Amaarockz

Reputation: 4684

Applying the following will also work

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

Upvotes: 0

symlink
symlink

Reputation: 12208

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

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

Upvotes: 1

Zachary Haber
Zachary Haber

Reputation: 11047

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

Upvotes: 2

Related Questions