div ng内的ionic 4离子幻灯片过宽

Question

我的离子滑片在离子含量方面效果很好，直到我将其移动到其中之一以下，然后离子滑片的宽度才变成2700px（刚好大于设置的370px）。

<div [ngSwitch]="segTab">
          <div class="sg-widgets" style="padding-left:10px" *ngSwitchCase="'home'">
              <ion-slides pager="false" [options]="slideOpts">
                  <ion-slide sg-slide>
                      <ion-card class="sg-card" style="width:370px !important">
                          <ion-card-header class="sg-card-header"><ion-row><ion-col text-left>TRENDING</ion-col></ion-row></ion-card-header>
                          <ion-card-content no-padding>
                              <ion-list style="background: transparent">
                                  <ion-item style="padding-bottom: 10px">
                                      <ion-avatar style="min-width:30px" item-start>
                                        <img src="https://pbs.twimg.com/profile_images/1063395785314836480/2Opw3f5G_bigger.jpg">
                                      </ion-avatar>
                                      <p style="padding-left:10px"><span style="font-weight: bold">Shreya Ghoshal</span> #TereBinaByShreyaGhoshal is out now. Watch the full song  This song is very close to my heart...</p>
                                      <ion-note item-end><ion-icon style="color:#1897EF;padding-left:8px" name="logo-twitter"></ion-icon></ion-note>
                                    </ion-item>
                                    <ion-item>
                                        <ion-avatar item-start>
                                          <img src="https://pbs.twimg.com/profile_images/1063395785314836480/2Opw3f5G_bigger.jpg">
                                        </ion-avatar>
                                        <p style="padding-left:10px"><span style="font-weight: bold">Shreya Ghoshal</span> town ain't big enough for the two of us!</p>
                                        <ion-note item-end><ion-icon style="color:#1897EF;padding-left:8px" name="logo-twitter"></ion-icon></ion-note>
                                      </ion-item>
                              </ion-list>
                          </ion-card-content>
                        </ion-card>
                  </ion-slide>
                  <ion-slide sg-slide>
                      <ion-card class="sg-card" style="width:370px !important">
                          <ion-card-header class="sg-card-header"><ion-row><ion-col text-left>ALBUMS</ion-col></ion-row></ion-card-header>
                          <ion-card-content padding>
                            <img src="../../assets/images/tere_bina.png">
                          </ion-card-content>
                        </ion-card>
                  </ion-slide>
                </ion-slides>


           </div>
           <div *ngSwitchCase="'events'">
             <h1>Events</h1>
           </div>
  </div>

global.scss：

ion-item {
    --background: transparent;
}

.sg-card {
    border-radius: 20px;
    height:300px;
    background-color: rgba(0,0,0,0.5);
    //width: 370px !important
}

.sg-card-header {
    color:white;
    border-bottom: 1px solid dimgray
}

.sg-slide {
    padding: 0 10px;
    width: 370px !important;
    max-width: 370px !important
  }