Javascript 如何让MuiList自动滚动

我正在创建一个聊天窗口组件，并使用MaterialUI。我本以为在列表周围的MuiList或MuiBox上加上一个height或max height会使它在每次发送新消息时自动滚动，但这似乎没有什么效果。我对此有些困惑，任何方向都会很好。下面是我的代码。我正在使用样式化组件进行样式化

export const ChatWindow=styled（MuiBox）`
&& {
位置：绝对位置；
右：0px；
底部：0px；
盒影：0px 7px 40px 2px rgba（148149150,0.3）；
背景：${Color.white}；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
过渡：0.3s缓进缓出；
边界半径：5px；
宽度：${props=>（props.fullscreen？'100%'：`${450}px`）；
高度：${props=>（props.fullscreen？'100%'：`${584}px`）；
/*最大高度：550px*/
}
`;
export const ChatWindowHeader=styled（MuiBox）`
&& {
背景：${Color.primary}；
最小高度：40px；
边框左上半径：5px；
边框右上角半径：5px；
颜色：白色；
填充：10px；
盒影：0 1px4pRGBA（0,0,0,0.2）；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
`;
export const MessageList=styled（MuiList）`
&& {
身高：80%；
溢出y：自动；
}
`;
export const MessageListItem=styled（MuiListItem）`
&& {
保证金：自动；
垫底：10px；
显示器：flex；
}
`;
export const messagereceivedbuble=styled（MuiBox）`
&& {
填充：8px 16px；
边缘底部：10px；
边界半径：10px 10px 10px 2px；
字体大小：300；
字体大小：14px；
单词包装：打断单词；
}
`;
export const messagesentbuble=styled（MuiBox）`
&& {
填充：8px 16px；
边缘底部：10px；
边界半径：10px 10px 2px 10px；
字体大小：300；
字体大小：14px；
单词包装：打断单词；
}
`;通过使用Diego Lara关于堆栈溢出问题的答案，我能够实现我想要的：