display: flex;
flex-direction: column-reverse;
And by unexpected, by that I just mean presumably most other modern browsers implement those attributes slightly differently than Pale Moon. It is entirely possible Pale Moon is the only one that has it correct to spec, in which case I'll move on and not "abuse" those CSS attributes...
Minimal steps to reproduce:
1) Create a new directory named however you wish, perhaps "chat".
2) Create three empty files in that directory called "index.html", "chat.css", and "chat.js".
3) Copy the contents of the three code blocks below into their respective files.
index.html
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="chat.css" media="screen" title="screen" />
</head>
<body>
<br>
<hr>
<br>
<div class="chat">
<div class="chat-content">
<div class="msg sent">Message 1</div>
<div class="msg rcvd">Message 2</div>
<div class="msg sent">Message 3</div>
<div class="msg sent">Message 4</div>
<div class="msg sent">Message 5</div>
<div class="msg rcvd">Message 6</div>
<div class="msg rcvd">Message 7</div>
</div>
</div>
<br/><br/>
<div class="btn">
<button id="addItems">Add new message</button>
</div>
<br>
<hr>
<br>
<script src="chat.js"></script>
</body>
</html>
Code: Select all
/* QuickReset */
* {
margin: 0;
box-sizing: border-box;
}
:root {
--rad: 20px;
--rad-sm: 3px;
font: 16px/1.5 sans-serif;
}
/* Button */
.btn {
display: flex;
justify-content: center;
}
.btn button {
background: #42a5f5;
color: #fff;
border: none;
padding: 7px 15px;
border-radius: var(--rad-sm);
outline: none;
}
/* Chat */
.chat {
overflow: auto;
height: 300px;
display: flex;
flex-direction: column-reverse;
/* ?enter the container */
max-width: 500px;
margin: 0 auto;
border: 1px solid #f1f1f1;
}
.chat-content {
padding: 20px;
max-width: 500px;
margin: auto;
width: 100%;
}
.msg {
position: relative;
max-width: 75%;
padding: 7px 15px;
margin-bottom: 5px;
}
.msg.sent {
border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
background: #42a5f5;
color: #fff;
/* moves it to the right */
margin-left: auto;
}
.msg.rcvd {
border-radius: var(--rad-sm) var(--rad) var(--rad) var(--rad-sm);
background: #f1f1f1;
color: #555;
/* moves it to the left */
margin-right: auto;
}
/* Improve radius for messages group */
.msg.sent:first-child,
.msg.rcvd + .msg.sent {
border-top-right-radius: var(--rad);
}
.msg.rcvd:first-child,
.msg.sent + .msg.rcvd {
border-top-left-radius: var(--rad);
}
Code: Select all
let chatContent = document.querySelector('.chat-content');
document.getElementById('addItems').addEventListener('click', function() {
let newMsg = document.createElement('div');
newMsg.classList.add('msg', (chatContent.children.length % 2) ? 'sent' : 'rcvd');
newMsg.innerHTML = "Message " + (chatContent.children.length + 1)
chatContent.appendChild(newMsg);
});
5) Open the "index.html" file in another modern browser. Notice a vertical scroll bar displayed on the right side of the main chat window div.
Screenshots:
Pale Moon:

Waterfox (3-4 versions behind latest because that's what I have on this machine):

Context:
I'm trying to implement a simple chat room feature from scratch using PHP/MySQL/HTML/CSS and a sprinkling of vanilla JS. When looking into having the chat window automatically scroll down when a new message is received, I found the normal JS solutions, but then fell in love with a CSS-only solution described here:
https://maksymkotov.com/blog/how-to-aut ... ages-added
It doesn't suffer from the same issue most JS solutions do, and it's just very clean and simple. I'd love to implement it if possible. If not, I can fall back to the typical JS solution(s).
I've searched the forum and there was a little bit of mention of these CSS properties but nothing related that I could find. Also, if the minimal code above to reproduce is confusing or too "busy" I can try to trim it down a good bit more to make it clearer what's going on. Just let me know.