Using CSS flexbox and overflowing top instead of bottom - html

Question

I'm making a "chatbox" with CSS flexbox and I'm stuck with trying to get items to overflow correctly.
I want the chat to always be in order with newest items on the bottom, like a normal chat.
The end user is able to select whether they want the chats to align to the top or to the bottom of the container.
When I have it set to bottom and can use the justify-content: flex-end property, it overflows at the top perfectly.
Here's how I'm trying to get it to work:
When the first chat comes in, it is aligned to the top of the container.
When the second chat comes in, it is under the first chat.
Eventually there will be enough messages that it overflows its container. However since I'm using the justify-content: flex-start property to align to the top, the items overflow at the bottom when instead I want the items to be pushed out the top.
How do I get the messages to move up?
<div id="main-container">
<div id="messages">
<div class="message-row">Message 1</div>
<div class="message-row">Message 2</div>
<div class="message-row">Message 3</div>
</div>
</div>
and my CSS (my CSS is a lot more complex than this so I removed what I think is unnecessary for the question but please let me know if you need to see something else)
#messages {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 95%;
box-sizing: border-box;
overflow: hidden;
}

Answer 1

This is how I've done it. I've created a div called message-block and aligned it to the parent using flex-end so it always sits at the bottom. This block, however, has the children aligned to the top. Because I've set the min-height to 100% it pushes its size to the parent (message-block) and the messages appear at the top. As it overflows with more messages the flex-end keeps the bottom message visible.
Took some thinking about. I not too sure I understand it myself tbh ;-)
var count = 0;
window.onload = () => {
document.getElementById('clear').addEventListener('click', (e) => {
document.querySelector(".message-block").innerHTML = "";
count = 0;
});
setInterval(appendChild, 1000);
};
function appendChild() {
let msg = document.createElement("div");
msg.className = "message";
msg.innerText = "Message " + count++;
document.querySelector(".message-block").appendChild(msg);
}
.container {
height: 160px;
overflow: hidden;
display: flex;
align-items: flex-end;
border: 1px solid gray;
}
.message-block {
width: 100%;
min-height: 100%;
}
.message {
border-radius: 0.5rem;
background-color: lightgray;
margin: 0.25rem;
padding: 0.25rem 0.5rem;
}
<div class='container'>
<div class='message-block'></div>
</div>
<button id='clear'>Clear</button>

Answer 2

One way to achieve this would be to set the CSS property overflow-y: scroll; on the #messages element, and then set the property align-items: flex-end; on the #messages element when the user wants to align the messages to the bottom.
This will make the messages overflow out of the top of the container, while still maintaining the latest messages at the bottom of the container when scrolled to the bottom.
Let me know if this works!