Hasta ahora implementé esto de la siguiente manera.

Este es un div dentro de un componente ReactJs:

 <div className='ChatAreaClass' as={InputMessage} style={{ display: "flex", flexDirection: "row", borderTop: "1px dashed #d1dbe4", alignItems: 'end', marginBottom: "5px" }}> <Button className='chat-btn' style={{backgroundImage: `url(${stickersIcon})`}} /> <Button className='chat-btn' style={{backgroundImage: `url(${gifIcon})`}} /> <Button className='chat-btn' style={{backgroundImage: `url(${emojiIcon})`}} /> <textarea onChange={e => setTextAreaAutosize(e)} className='form-control text-area' value={chatMessage} placeholder='write here ...'> </textarea> <Button className='chat-btn' style={{backgroundImage: `url(${arrowIcon})`}} /> </div>

CSS:

 .ChatAreaClass { text-align: left; border-top: unset !important; margin-top: 0px; } .text-area { margin-left: 5px; margin-right: 6px; margin-bottom: 4px; border-radius: 10px; overflow: clip; margin-top: 5px; resize: none; border-color: #2200ff; max-height:200px; scrollbar-width: none; }

Producción:

Ahora, frente al problema del área de texto de entrada de chat.

Para mensajes de texto de entrada grandes, oculta los mensajes entrantes.

La salida esperada es:

¿Cómo puedo conseguir esto? ¿Debo hacer 3 div diferentes o es posible de alguna otra manera?