Scrollable List

app.js

import logo from "./logo.svg";
import "./App.css";
import styled from "styled-components";

function App() {
  return (
    <Container>
      <WrapperCard>
        <Card></Card>
        <Card></Card>
        {/* <Card></Card> eventually loop */}
      </WrapperCard>
    </Container>
  );
}

const Container = styled.div`
  background: #36393e;
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  flex-direction: row;
`;

const WrapperCard = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: auto;
  height: 100%;
  white-space: nowrap;
`;

const Card = styled.div`
  margin: 20px;
  background: #fff;
  height: 400px;
  width: 400px;
  border-radius: 20px;
`;

export default App;

const Container = styled.div`
  background: #36393e;
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  flex-direction: row;
  overflow: hidden; // add
`;

const WrapperCard = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap; // add
  overflow: auto;
  height: 100%;
  /* white-space: nowrap; */
`;

const Card = styled.div`
  margin: 20px;
  background: #fff;
  height: 400px;
  width: 400px;
  border-radius: 20px;
  flex: 0 0 400px; // add
`;