JSFiddle - React, Tailwind, and code Playground

by tjdragon

HTML

<div id="maincontainer">
    <div id="parent">
        <div id="child">x</div>
        <div id="child">x</div>
        <div id="child">x</div>
        <div id="child">x</div>
        <div id="child">x</div>
        <div id="child">x</div>
        <div id="child">x</div>
        <div id="child">x</div>
        <div id="child">x</div>
        <div id="child">x</div>
    </div>
</div>

CSS

#maincontainer{
    width: 100%;
    
}

#parent{
    height: 65px;
    width: 200px;
    overflow: hidden;
    overflow-x: auto;
    -ms-overflow-x: auto;
    -ms-overflow-y: hidden;
    border: 1px dotted red;
    padding: 1px;
    display: inline-block;
    white-space: nowrap;
}

#child{
    width: 60px;
    height: 60px;
    border: 1px solid gray;
    display: inline-block;
}