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;