title: Horizontal scrolling div not working in Firefox
body: <p>I have a scrolling div contain a <code>ul</code> in react.
  When the number of <code>li</code>increased, the division should scroll horizontally.</p>
  <p>this is my code:</p>
  <pre><code>&lt;div className=&quot;inner-scrolling&quot;&gt;
    &lt;ul className=&quot;list&quot;&gt;
       &lt;li&gt; item&lt;/li&gt;
       ...
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>this is css:</p>
  <pre><code>.inner-scrolling {
    width: 100%;
    max-width: 0;
    overflow-x: auto;
  }
  
  .list {
    list-style: none;
    display: inline-flex;
  }
  </code></pre>
  <p>This is working correctly in Chrome but not working in Firefox. How can I fix it?
  I tried <code>max-width:500px</code> but it doesn't work in Firefox yet. actually in Firefox, <code>li</code>s move out of the <code>div</code>.</p>