React Horizontal List with Styled Components

Question

I am trying to make a horizontal scrollable list in React with Styled Components. Each list item is a fairly complex React component.

I have tried this question, this question, and this question too but none of them have worked. Each time, I either get a vertical list or a 2x2 grid.

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 => (
      <ListItem>{<MatchupPanel matchups={m} />}</ListItem>
    ));
    return <List>{listItems}</List>;
  }
}

Answer 1

With inline-block, you can solve it with setting white-space: nowrap; on the list. See example: https://codesandbox.io/s/agitated-ishizaka-modcj?fontsize=14

There are also several other ways to solve it.