[Vuejs]-Change width of the flex columns?

by

0👍

✅

It’s pretty simple. Add shrink property to the block which you want to take less space:

    <v-flex shrink>
     <h2>This is the first Column And there is a lot of space in between.</h2>
    </v-flex>

And grow to the one you want to take more:

    <v-flex class="column_wrapper" grow>
        <div v-for="list in lists" :key="list">
        <span class="title">{{list.text}}</span>
      </div>    
      </h1>         
    </v-flex>
  </v-layout>

0👍

According to Vuetify, the v-flex adds flex: 1 1 auto; that means that it has flex-grow set to 1, while your .column_wrapper element has not. You can either add width: 100% to your .column_wrapper, set flex-grow: 0 to the v-flex or add a bigger flex-grow to the .column_wrapper.

Leave a comment