Прокрутка не работает при переполнении контента в интерфейсе материалов

Question

Я пытаюсь отобразить dummyData в div. Проблема в том, что прокрутка не работает (особенно на экране мобильного телефона), когда данные перетекают с экрана по вертикали. Я попытался использовать список Material UI вместо div, но безуспешно. Вот код CodeSandbox .

import React from "react";
import makeStyles from "@material-ui/core/styles/makeStyles";

const useStyles = makeStyles(theme => ({
  container: {
    bottom: 0,
    position: "fixed"
  },
  bubbleContainer: {
    width: "100%"
  },
  bubble: {
    border: "0.5px solid black",
    borderRadius: "10px",
    margin: "5px",
    padding: "10px",
    paddingTop: "150px",
    paddingBottom: "150px",
    display: "inline-block"
  }
}));

const Demo = () => {
  const classes = useStyles();
  const dummyData = [
    {
      message: "Some random text"
    },
    {
      message: "Some random text"
    },
    {
      message: "Some random text"
    },
    {
      message: "Some random text"
    },
    {
      message: "Some random text"
    }
  ];

  const chatBubbles = dummyData.map((obj, i = 0) => (
    <div className={classes.bubbleContainer}>
      <div key={i++} className={classes.bubble}>
        <div>{obj.message}</div>
      </div>
    </div>
  ));
  return <div className={classes.container}>{chatBubbles}</div>;
};

export default Demo;