title: Horizontal scrollbar not working in react
body: <p>I have a <code>scroll__cotainer</code> div like so:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;div className=&quot;scroll__container&quot;&gt;
              &lt;div onClick={setBlackTheme} className=&quot;skin__option&quot;&gt;
                &lt;p&gt;Black&lt;/p&gt;
              &lt;/div&gt;
              &lt;div onClick={setBlueTheme} className=&quot;skin__option&quot;&gt;
                &lt;p&gt;Blue&lt;/p&gt;
              &lt;/div&gt;
              &lt;div onClick={setRedTheme} className=&quot;skin__option&quot;&gt;
                &lt;p&gt;Red&lt;/p&gt;
              &lt;/div&gt;
              &lt;div onClick={setYellowTheme} className=&quot;skin__option&quot;&gt;
                &lt;p&gt;Yellow&lt;/p&gt;
              &lt;/div&gt;
              &lt;div onClick={setGreenTheme} className=&quot;skin__option&quot;&gt;
                &lt;p&gt;Green&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  <p>However, when I apply the following css to the container, the horizontal scroll bar doesn't work:</p>
  <pre class="lang-css prettyprint-override"><code>.scroll__container {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    line-height: 0;
    -webkit-overflow-scrolling: touch;
    /* transform: translate3d(0, 0, 0);
    position: sticky; */
    cursor: grab;
  }
  </code></pre>
  <p>I get these two weird looking grey bars where the scroll bar should be:</p>
  <p><a href="https://i.stack.imgur.com/LfJyq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LfJyq.png" alt="Pic of weird grey bars" /></a></p>
  <p>What am I doing wrong?</p>