How To: Scrollable List Using CSS

Creating scrollable lists with basic CSS couldn’t be easier! In fact, we will be able to get a functioning scrollable list in less than 5 minutes.

All we need to do this is 2 containers. One for the individual cards, and a wrapper to contain all of them. The code looks like this

App.js

import './App.css';
import Card from './Card';
import { data } from './Data';
const App = () => {
  return (
    <div className="listContainer">
      { data.map(data => <Card key={ data.id } { ...data } />) }
    </div>
  );
}
export default App;

Card.js

import React from 'react';

const Card = ({title}) => {
  return (
    <div className="card">
      <h1>{title}</h1>
    </div>
  )
}
export default Card;

Before Styling

As you can see, this is extremely ugly and not what we’re looking for whatsoever. Thankfully, with a tiny bit of CSS, we will have something much nicer! Most of this is just basic such as adding a border to make the container more visible to help you better visualize what’s happening here. However, the last line in .listContainer is the magic ingredient to all of this.

App.css

* {
text-align: center;
}
.listContainer {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  border: 1px solid black;
  width: 500px;
  justify-content: center;
  max-height: calc(100vh - 210px);
  // magic
  overflow-y: auto;
}

Just by adding some simple CSS we now have something useful!