I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom from the 'react-scroll-to-bottom' library.
https://i.sstatic.net/2xWKh.jpg https://i.sstatic.net/CLznu.jpg
Thank you:)
messageContainer: {
display: 'flex',
height: '100px',
overflowY: 'scroll',
overflowX: 'hidden',
},
<ScrollToBottom classes={classes.messageContainer}>
{messageList.map((data) => {
return (
<div
className={classes.message}
id={username === data.author ? "you" : "other"}
>
<div>
<div className={classes.messageMeta} id={username === data.author ? "you" : "other"}>
<p id='time'>{data.time}</p>
<p id='author'>{data.author}</p>
</div>
<div className={classes.messageContent}>
<h4 style={{textAlign: 'right'}} id={username === data.author ? "you" : "other"}>
{data.message}
</h4>
</div>
</div>
</div>
);
})}
</ScrollToBottom>