How to enable horizontal scroll on IonGrid using Ionic 5-React

How to enable horizontal scroll on IonGrid with IonCard. below is the code i am trying to enable the horizontal scroll so that all fields will be shown in the same row on any device or browser

                  
                 <IonCard>
                  <IonCardHeader> </IonCardHeader>
                  <IonCardContent>
                  <IonGrid>
                    <IonRow key={index} className="ion-nowrap">
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test1</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test2</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test3</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test4</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                </IonRow>
            </IonGrid>
        </IonCardContent>
</IonCard>

flex-wrap: nowrap;
overflow-x: scroll!important;
overflow-y: hidden;