I am trying to make a chat section with all the elements already mapped and shown (react):

<div className="localChat">
{messages.map(({ id, message }) => (
      <div style={{
      backgroundColor: message.userSent === user.email ? "#dcf8c6" : "#F5F5F5",
      borderTopLeftRadius: message.userSent !== user.email ? "0px" : "8px",
      borderTopRightRadius: message.userSent !== user.email ? "8px" : "0px",
      alignSelf: message.userSent === user.email ? "flex-end" : "flex-start"
    }} className="chat-message">
        <strong className="chat-message-text">{message.text}</strong>
        <p className="chat-message-date">{new Date(message.timestamp.toDate()).toLocaleString()}</p>
      </div>
    ))}
    </div>

There is nothing wrong with any of the timestamps or text. They are all being mapped properly.

I am trying to align it so if I sent it it would be on right and if another user sent it it would be of left and it would be different colors. All of this works apart from aligning it.

Here is the class styles I used:

.localChat {
height: 65vh;
margin-top: 20px;
width: 80vw;
background-color: white;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
overflow-y: scroll;
scroll-behavior: smooth;
flex: 1;
display: flex;
flex-direction: column;
overflow-y: scroll;
}

And here is the message css

.chat-message {
  display: flex;
  margin: 15px 30px 15px 30px;
  flex-direction: column;
  position: relative;
  width: fit-content;
  max-width: 400px;
  padding: 10px;
  background-color: #F3F3F3;
  border-radius: 10px;
  height: fit-content;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.chat-message-text {
  text-align: left;
  font-size: 13px;
  margin-bottom: 10px;
}

.chat-message-date {
  font-size: 11px;
  color: gray;
  font-weight: normal;
  align-self: flex-end;
}

For some reason my messages heights are so small and scrollbars apear.

I cant even see the text. once again, there is no error with the mapping and getting the text and timestamp. Something is wrong with css. Please help.