Estoy tratando de hacer una sección de chat con todos los elementos ya mapeados y mostrados (reaccionar):

 <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>

No hay nada malo con ninguna de las marcas de tiempo o texto. Todos ellos están siendo mapeados correctamente.

Estoy tratando de alinearlo para que si lo envío sea a la derecha y si otro usuario lo envíe sea a la izquierda y sea de diferentes colores. Todo esto funciona aparte de alinearlo.

Aquí están los estilos de clase que usé:

 .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; }

Y aquí está el mensaje 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; }

Por alguna razón, la altura de mis mensajes es tan pequeña y aparecen barras de desplazamiento.

Ni siquiera puedo ver el texto. una vez más, no hay ningún error con el mapeo y la obtención del texto y la marca de tiempo. Algo está mal con css. Por favor ayuda.