Issue

This Content is from Stack Overflow. Question asked by Edward Glapthorn

I’m trying to use the vuetify grid system. There needs to be a left container (AssumptionsBox component below) with a fixed width, and a right container (CalculationBox) which fills the rest of the screen on the right depending on the screen size. The contents of this container might exceed the width, in which case I’d like the container to become scrollable. However in my code below, instead of becoming scrollable, the right container drops below the left container in order to display everything, thereby filling the full screen width. If further content is added, only then does this right (well actually, below now) container become scrollable.

I’ve tried a few things, including following the official guide, but still struggling. Any idea what I’m doing wrong?

    <v-main>
        <v-container class="grey lighten-5" fluid>
            <v-row no-gutters>
              <v-col cols="4">
                <v-card class="pa-2" outlined tile>
                  <AssumptionsBox />
                </v-card>
              </v-col>
              <v-col>
                <v-card class="pa-2" md="auto" outlined tile>
                  <CalculationBox />
                </v-card>
              </v-col>
            </v-row>
        </v-container>
    </v-main>

Solution

The grid system is usually divided to 12 equal columns, so I guess your problem is your second column is not set the property cols properly. Let’s try to set cols="8" to the second column (container of the CalculationBox)

<v-main>
    <v-container class="grey lighten-5" fluid>
        <v-row no-gutters>
          <v-col cols="4">
            <v-card class="pa-2" outlined tile>
              <AssumptionsBox />
            </v-card>
          </v-col>
          <v-col cols="8">
            <v-card class="pa-2" md="auto" outlined tile>
              <CalculationBox />
            </v-card>
          </v-col>
        </v-row>
    </v-container>
</v-main>

This Question was asked in StackOverflow by Edward Glapthorn and Answered by vicnoob It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.