Chat Box UI not scrolling with react-bootstrap Accordion

Question

I am creating chat box UI with react-bootstrap and using Accordion for it. However, when messages are overflow from container height of 50vh its not behave to scroll.

Sandbox link

Expected Behavior

Scrolling behavior should be achieved

Actual Behavior

Its not scrolling when messages overflow. I have also added overflow-y: scroll to container div.

Sandbox link

import React from "react";
import Accordion from "react-bootstrap/Accordion";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

export default function App() {
  const [messages, setMessages] = React.useState([
    {
      id: 1,
      from: "me",
      to: "Jash Jariwala",
      text: "Hi, How Are You ?"
    },
    {
      id: 2,
      from: "me",
      to: "Jash Jariwala",
      text:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quas."
    },
    {
      id: 3,
      from: "Jash Jariwala",
      to: "me",
      text:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, aperiam iure atque exercitationem ab ducimus."
    },
    {
      id: 4,
      from: "Jash Jariwala",
      to: "me",
      text: "Lorem ipsum dolor sit amet consectetur adipisicing."
    },
    {
      id: 5,
      from: "me",
      to: "Jash Jariwala",
      text: "Hi, How Are You ?"
    },
    {
      id: 6,
      from: "me",
      to: "Jash Jariwala",
      text: "Hi, How Are You ?"
    },
    {
      id: 7,
      from: "me",
      to: "Jash Jariwala",
      text: "Hi, How Are You ?"
    },
    {
      id: 8,
      from: "me",
      to: "Jash Jariwala",
      text: "Hi, How Are You ?"
    },
    {
      id: 9,
      from: "me",
      to: "Jash Jariwala",
      text: "Hi, How Are You ?"
    },
    {
      id: 10,
      from: "me",
      to: "Jash Jariwala",
      text: "Hi, How Are You ?"
    }
  ]);

  return (
    <div className="PopMessageBox-wrapper">
      <Accordion>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Message
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <div className="read-message-wrapper">
                {messages.length ? (
                  messages.map((item) => {
                    return (
                      <div
                        key={item.id}
                        className={
                          item.from === "me"
                            ? "message-item float-right"
                            : "message-item"
                        }
                        id={item.id}
                      >
                        {item.from === "me" ? (
                          <span></span>
                        ) : (
                          <p style={{ color: "black" }}>From: {item.from}</p>
                        )}

                        <h6 style={{ color: "black" }}>{item.text}</h6>
                      </div>
                    );
                  })
                ) : (
                  <span>No Messages. Start Chatting ...</span>
                )}
              </div>
              <div className="send-message-wrapper"></div>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
}

Answer 1

This is an issue with regards to your .read-message-wrapper element that has justify-content: flex-end. Comment that out and you will see that the overflow property works as expected. Regarding why it does not work you can refer to: Use justify-content: flex-end and to have vertical scrollbar.

With regards to the chat scroll position initializing at the bottom, I solved this in the past by updating the HTMLElement scrollTop each time a message state has updated (e.g., a new message is received or sent - note that this should technically trigger on-mount as well since the state is initialized). The formula I used is as follows:

$0.scrollTop = $0.scrollHeight - $0.clientHeight // where $0 is your element with overflow property