I am currently working on a chat application and facing an issue with anchoring messages to the bottom of the message index while allowing them to grow upwards instead of hanging from the top. The project is developed using React, so the code provided below is in JSX.
Message Index:
<div className="chat-message-index">
{this.state.activeChannel.messages.map(function(message{
return <Message key={message.sid} message={message} />;
})}
</div>
Messages (rendered within the index):
<div className="chat-message">
<b className="name">{this.state.author}</b><br/>
<span dangerouslySetInnerHTML={{__html: this.state.message.body}} />
</div>
CSS:
.chat-message-index {
height: calc(~"100vh - 250px");
position: absolute;
overflow-y: scroll;
width: 100%;
background-color: silver;
display: list-item;
}
.chat-message {
position:relative;
padding:10px;
margin:22px 45px 22px 20px;
color:#fff;
background:#43464b;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#aeb5ba), to(#43464b));
background:-moz-linear-gradient(#aeb5ba, #43464b);
background:-o-linear-gradient(#aeb5ba, #43464b);
background:linear-gradient(#aeb5ba, #43464b);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
I have exhausted all CSS techniques and ideas found through research without success. I attempted using transform:rotate(180deg); on both the message index and messages, but this caused issues with scrolling and positioning. While I may be able to make this approach work, it seems like a hacky solution that could lead to complications in the future...
Is there a simple way to invert the anchoring of a <div>? I simply want the first message displayed at the bottom of the message index <div>, with subsequent messages stacking on top of each other.