Soy un principiante y recientemente hice una aplicación de chat usando React Js y Firebase. Estoy almacenando todos los mensajes enviados entre 2 personas en una matriz en un campo de documento en firebase. Entonces, cuando llamo a esa matriz desde la base de datos, divido los mensajes en función de si el remitente lo envió o el receptor. Uso un solo div y su nombre de clase se basa en quién envió el mensaje, es decir, lado izquierdo o lado derecho. Tengo problemas para mantener los mensajes del lado derecho en el lado derecho. Inicialmente, para el ancho de la burbuja de chat, solo usé un ancho máximo y mínimo. Eso hizo que todos los anchos aumentaran según el mensaje más largo, pero al menos los mensajes del lado izquierdo y derecho estaban justificados (moví los mensajes del lado derecho usando el margen izquierdo). Pero cuando usé width: 'max-content' , las burbujas de chat funcionaron bien, pero no pude mover las burbujas del lado derecho a la derecha. Espero que la pregunta no haya sido tan confusa.

 <div className='chat-section'> <div className='chat-messages' ref={messageEl}> <h1><div className='receiver-info'>{receiver}</div></h1> {receiver.length ? messages.map((message, index) => ( <div key={index} className={message.displayName === user.displayName ? 'right-side' : message.displayName === receiver ? 'left-side' : null }> <p>{message.text}</p> </div> )) : <div className='empty-chat'><Empty description={ <span> Select a Friend to start chatting </span> } /></div>} </div>

y mi css

 .left-side { margin-bottom: 20px; margin-left: 20px; background-color: #fff; padding: 1.125em 1.5em; font-size: 1em; border-radius: 0 1rem 1rem 1rem; box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2); border-bottom-color: #fff; filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1)); width: fit-content; display: flex; } .right-side { position: relative; margin-left: 65%; width: fit-content; margin-bottom: 20px; background-color: rgb(151, 178, 250); padding: 1.125em 1.5em; font-size: 1em; border-radius: 1rem 0 1rem 1rem; box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2); border-bottom-color: rgb(151, 178, 250); filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1)); }

Esto es lo máximo que pude manejar y así es como se ve en este momento Imagen de chat