Question: I'm using Ionic React to build a mobile app. I want to create a horizontal scrollable component that exceeds screen width to display categories. I can't seem to find the right Ionic components to use for that.

Any help?

Answer: 
I have done horizontal scrolling in ionic react by :

```
<IonSlides pager="true" scrollbar="true" watchOverflow="false" >
 <IonSlide>
        <IonCard style={{width:"142px",height:"112px"}}>
                <IonGrid style={{background:"transparent",paddingTop:"15px",paddingLeft:"14px"}}>
                <IonRow size="12" style={{marginTop:"9px"}}>
                    <div>
                        <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>Chadwick Boseman</IonLabel>
                    </div>
                </IonRow>
                <IonRow size="12" style={{marginTop:"5px"}}>
                    <div>
                        <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>+6591876258</IonLabel>
                    </div>
                </IonRow>
                </IonGrid>

        </IonCard> 
      <IonSlide>
      <IonCard style={{width:"142px",height:"112px"}}>

            <IonGrid style={{background:"transparent",paddingTop:"15px",paddingLeft:"14px"}}>
            <IonRow size="12" style={{marginTop:"9px"}}>
                <div>
                    <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>Rajesh Buhair</IonLabel>
                </div>
            </IonRow>
            <IonRow size="12" style={{marginTop:"5px"}}>
                <div>
                    <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>+6591876258</IonLabel>
                </div>
            </IonRow>
            </IonGrid>

    </IonCard>
 </IonSlide>
</IonSlides>

```
You can use the IonContent component giving it a scrollX property and a fixed width. the internal component that wraps the items (direct child) should be giving fixed width of 100vh.

```
<IonContent>
  <!-- the rest of your code -->

<IonContent style={{ height: `45px` }} scrollX >
                <div style={{ width: `100vh` }}>
                    <Items></Items>
                </div>
            </IonContent>

    <!-- the rest of your code -->

```