Horizontal scroll for VDataTable in Vuetify

Question

I have a component that displays data with v-data-table, but it's going out of bounds and only viewable on desktops when the zoom is set to 60%.

Here is a link to the problematic component: http://v3dev.komodefi.com:17077/traderview/RICK/MORTY.

You can completely view it if zoomed out enough. I have tried different props but none works

I am referring to the component with the heading AtomicDex OrderBook.

The component has a v-data-table displaying current open orders for the pairs on the page.

I want to enable horizontal scrolling and limit the component to the page width (responsive). Here's the code:

    <v-toolbar flat dense color="indigo">
      <v-toolbar-title>
        <span class="subheading">AtomicDEX order book</span>
      </v-toolbar-title>
      <div class="flex-grow-1"></div>
      <v-chip
        class="ma-2"
        color="white"
        outlined
        @click="refreshMarket()"
      >
        <v-icon left>mdi-server-plus</v-icon>Refresh
      </v-chip>
    </v-toolbar>
    <div v-if="marketdata.asks">
      <div>
        <v-layout>
          <v-flex md lg>
            <v-card-title>Asks</v-card-title>
            <v-data-table
              dense
              :sort-by="['price']"
              :sort-desc="[true]"
              :hide-default-footer="true"
              :headers="asksHeaders"
              :items="marketdata.asks"
              :items-per-page="-1"
              height="200px"
              class="elevation-1"
            >
              <template v-slot:column.price="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Price ({{wallets.rel.ticker }})
              </template>

              <template v-slot:column.maxvolume="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Amount ({{wallets.base.ticker }})
              </template>

              <template v-slot:column.relamount="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Total ({{wallets.rel.ticker }})
              </template>

              <!-- Rounding from https://www.jacklmoore.com/notes/rounding-in-javascript/ -->
              <!-- Better to move to computed function for maintainability/non-repetitive -->
              <template v-slot:item.price="{ item }"> {{ Number(Math.round(item.price+'e8')+'e-8') }}</template>

              <!-- For highlighting my orders, TODO need a price:uuid array before grouping by price in AppTraderview   -->
              <template v-slot:item.price2="{ item }">
                {{ Number(Math.round(item.price+'e8')+'e-8') }}
<!--
better implementation handled in parent component on load of orders, then promise to set flag
                <v-chip v-if="hasMyOrder(item.price)" color="purple" dark>me</v-chip>
-->
                <v-chip v-if="item.myOrder" x-small color="purple" dark>*</v-chip>
              </template> 

              <template
                v-slot:item.maxvolume="{ item }"
              >{{ Number(Math.round(item.maxvolume+'e8')+'e-8') }}</template>
              <template
                v-slot:item.relamount="{ item }"
              >{{ Number(Math.round(item.price*item.maxvolume+'e8')+'e-8') }}</template>
            </v-data-table>
          </v-flex>
        </v-layout>
      </div>
    </div>
    <div v-else>No current asks to display.</div>
    <h2 class="pl-3">{{ middlePriceSpreadData.middle }} Middle Price (Spread: {{ middlePriceSpreadData.spread}} %)</h2>

    <div v-if="marketdata.bids">
      <div>
        <v-layout>
          <v-flex md lg>
            <v-card-title>Bids</v-card-title>
            <v-data-table
               dense
              :sort-by="['price']"
              :sort-desc="[true]"
              hide-default-footer
              disable-pagination
              :headers="bidsHeaders"
              :items="marketdata.bids"
              :items-per-page="-1"
              height="200px"
            >

              <template v-slot:column.price="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Price ({{wallets.rel.ticker }})
              </template>

              <template v-slot:column.baseamount="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Amount ({{wallets.base.ticker }})
              </template>

              <template v-slot:column.maxvolume="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Total ({{wallets.rel.ticker }})
              </template>

              <!-- Rounding from https://www.jacklmoore.com/notes/rounding-in-javascript/ -->
              <!-- Better to move to computed function for maintainability/non-repetitive -->
              <template v-slot:item.price="{ item }">{{ Number(Math.round(item.price+'e8')+'e-8') }}</template>
              
              <!-- For highlighting my orders, TODO need a price:uuid array before grouping by price in AppTraderview   -->
              <template v-slot:item.price2="{ item }">
                {{ Number(Math.round(item.price+'e8')+'e-8') }}
<!--
better implementation in parent component
                <v-chip v-if="hasMyOrder(item.price)" color="purple" dark>me</v-chip>
-->
                <v-chip v-if="item.myOrder" x-small color="purple" dark>*</v-chip>
              </template> 
              <template
                v-slot:item.baseamount="{ item }"
              >{{ Number(Math.round(item.maxvolume/item.price+'e8')+'e-8') }}</template>
              <template
                v-slot:item.maxvolume="{ item }"
              >{{ Number(Math.round(item.maxvolume+'e8')+'e-8') }}</template>
            </v-data-table>
          </v-flex>
        </v-layout>
        
      </div>
    </div>
    <div v-else>No current bids to display.</div>
  </v-card>
</template>