title: React Horizontal List with Styled Components
body: <p>I am trying to make a <strong>horizontal scrollable list</strong> in React with Styled Components. Each list item is a fairly complex React component.</p>
  
  <p>I have tried <a href="https://stackoverflow.com/questions/2145181/how-to-make-a-html-list-appear-horizontally-instead-of-vertically-using-css-only">this question</a>, <a href="https://stackoverflow.com/questions/3790202/css-list-inline-is-not-listing-items-horizontally">this question</a>, and <a href="https://stackoverflow.com/questions/15710701/horizontal-list-items">this question too</a> but none of them have worked. Each time, I either get a vertical list or a 2x2 grid.</p>
  
  <pre class="lang-js prettyprint-override"><code>const List = styled.ul`
    list-style: none;
    overflow-x: auto;
  `;
  
  const ListItem = styled.li`
    display: inline-block;
  `;
  
  export default class PanelList extends Component {
    render() {
      const listItems = this.props.matchups.map(m =&gt; (
        &lt;ListItem&gt;{&lt;MatchupPanel matchups={m} /&gt;}&lt;/ListItem&gt;
      ));
      return &lt;List&gt;{listItems}&lt;/List&gt;;
    }
  }
  </code></pre>