How to make a vuetify container dynamic in width and scrollable?-CodePudding

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  fluid>
            <v-row no-gutters>
              <v-col cols="4">
                <v-card  outlined tile>
                  <AssumptionsBox />
                </v-card>
              </v-col>
              <v-col>
                <v-card  md="auto" outlined tile>
                  <CalculationBox />
                </v-card>
              </v-col>
            </v-row>
        </v-container>
    </v-main>

CodePudding user response：

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  fluid>
        <v-row no-gutters>
          <v-col cols="4">
            <v-card  outlined tile>
              <AssumptionsBox />
            </v-card>
          </v-col>
          <v-col cols="8">
            <v-card  md="auto" outlined tile>
              <CalculationBox />
            </v-card>
          </v-col>
        </v-row>
    </v-container>
</v-main>