I am unable to view vuejs-datepicker calender in full

Question

<template>
  <div>

    <vx-card title="Credit Card Request" class="overflow-auto">
      <div slot="no-body" class="mt-4">

        <div class="vx-row">
          <div class="vx-col w-2/3">
            <vs-collapse>
              <vs-collapse-item>
                <div slot="header">
                  Filter Options
                </div>
                <div class="vx-row">
                  <datepicker class="vx-col w-1.4 " placeholder="Select Start Date" v-model="query.startDate" format="yyyy-MM-DD"></datepicker>
                  <datepicker class="vx-col w-1.4 " placeholder="Select End Date" v-model="query.endDate" format="yyyy-MM-DD"></datepicker>
                </div>
                <br>
                <vs-button class="" @click="fetchCards(1)">Search</vs-button>
              </vs-collapse-item>
            </vs-collapse>
          </div>
          <div class="vx-col w-1/3">
            <br>
            <vs-button @click="fetchCards(1, true)" color="primary" style="float: right; margin-right: 20px" type="filled" size="small">Download</vs-button>
          </div>
        </div>

        <vs-table :data="creditcards" class="table-dark-inverted">
         
        </vs-table>
      </div>
  </div>
</template>

I have tried adding an overflow-visible class to the row containing the date-picker component and nothing happens, when I try using overflow-auto, I get a scroll bar, but the calender is barely visible. I'm sure there is a way to view the calender in its entirety that I'm missing. I'm self taught and I'd appreciate the help