React Bootstrap 中的可滚动 div

Question

我正在尝试制作一个可滚动的聊天消息容器，但它不起作用 我尝试了样式、其他库和几乎所有的东西，但它仍然不起作用

这是它的代码

// Libraries

const ChatArea = ({ props }) =>{
  console.log("Hello World");
};

  return(
    <div className="chatArea-container">
      <div className="chatArea-header">
        <p className="con-icon mt-3">{props?.name[0]}</p>
        <div className="header-text">
          <p className="con-title mb-2 mt-2">{props?.name}</p>
          <p className="con-date">{props?.date[0]}</p>
        </div>
        <FaTrash className="icon"/>
      </div>
      <div className="messages-container"> -----> I want the scrolling to be here
        <MessageOthers/>
        <MessageSelf/>
        <MessageOthers/>
        <MessageSelf/>
        <MessageOthers/>
        <MessageSelf/>
      </div>
      <div className="text-input"></div>
    </div>
  )
}

export default ChatArea;

我们将感谢您的帮助

Answer 1

您是否尝试过为此设置固定高度

div

并在CSS中使用

overflow: scroll

？