'Scrolling chat in a CardContent Material UI

I am currently trying to build a chat app and I am having a problem with the my "chat-box". When there is new message, the card height keep expending for some reason and I was wondering how can I make it static and use scrolling instead? I'am using Material UI for the CSS

Thank you :)

<CardContent className={classes.cardContent}>
   <div className="chat-window">
       <div className="chat-header">
            <h1 variant="h1"> Live chat</h1>
        </div>
        <div className="chat-body">
          <Typography variant='caption'> 
            Vous discutez maintenant avec un inconnu au hasard. Pourquoi ne pas faire connaissances !
          </Typography>
          {messageList.map((data) => {
          return (
             <div className="message" id={username === data.author ? "you" : "other"}> 
                <h5>{data.time} {data.author}: {data.message}</h5>
             </div>
            )
          })}
      </div>
...

CSS for the card content

     cardContent: {
        flexGrow: 5,
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Scrolling chat in a CardContent Material UI

Sources

Related Questions