Ion modal doesn't show out all my data

Hi, I want to ask why my ion-modal doesn’t render all the data? Does the width and height make my data cannot show out?

//html
<ion-modal ref="modal" trigger="open-modal">
              <ion-header>
                <ion-toolbar>
                  <ion-title>{{$t('coupon')}}</ion-title>
                  <ion-buttons slot="end">
                    <ion-button @click="cancel">{{$t('close')}}</ion-button>
                  </ion-buttons>
                </ion-toolbar>
              </ion-header>
            <ion-content class="ion-padding">
              <ion-card>
                <ion-card-content>
                  <table>
                    <thead>
                      <th>{{$t('code')}}</th>
                      <th>{{$t('dateReceived')}}</th>
                      <th>{{$t('amount')}}</th>
                      <th>{{$t('activationFees')}}</th>
                      <th>{{$t('expiryDate')}}</th>
                    </thead>
                  <tbody v-for="item in couponList" :key="item">
                    <tr>
                      <td data-label="Code">{{item.cCouponCode}} </td>
                      <td data-label="Date Received">{{new Date(item.cDateCreated).toLocaleDateString("en-SG",options)}}</td>
                      <td data-label="Amount">{{item.cAmt}}</td>
                      <td data-label="Activation Fee">{{item.cActFee}}</td>
                      <td data-label="Expiry Date">{{new Date(item.cExpiryDate).toLocaleDateString("en-SG",options)}}</td>
                    </tr>
                  </tbody>
                </table>
                </ion-card-content>
              </ion-card>
            </ion-content>
            </ion-modal>

Capture

because ion-content is inside ion-modal? try to remove it and see what happens

Hello, after I remove ion-card and ion-card-content everything works fine. Thank you.