My goal for the chatbox was to align multiple divs to the bottom of the parent. I referred to this link on Stack Overflow: Align multiple divs to bottom of parent
Unfortunately, I encountered an issue where it wouldn't create a scrollbar after overflow.
Here is how it looks without using Flex: https://i.sstatic.net/IsZpz.gif
And here is the result after applying Flex to align messages to the bottom, but still facing scrolling problems: https://i.sstatic.net/kEmIA.gif
let chatText = document.getElementById('chat-text');
let chatText2 = document.getElementById('chat-text-with-flex');
let chatInput = document.getElementById('chat-input');
let chatForm = document.getElementById('chat-form');
chatForm.onsubmit = (e) => {
e.preventDefault();
chatText.innerHTML += '<div>' + chatInput.value + '</div>';
chatText2.innerHTML += '<div>' + chatInput.value + '</div>';
}
#chat-bg {
position: relative;
height: 100%;
width: 519px;
height: 141px;
overflow: auto;
}
#chat-text {
position: absolute;
margin-top: 5;
padding-left: 10;
border: solid 1px black;
background-color: red;
height: 112px;
width: 502px;
overflow-y: auto;
color: black;
}
#chat-text-with-flex {
position: absolute;
margin-top: 5;
padding-left: 10;
border: solid 1px black;
background-color: red;
height: 112px;
width: 502px;
overflow-y: auto;
color: black;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#chat-text div,#chat-text-with-flex div {
color: white;
border: solid 1px black;
background-color: blue;
word-wrap: break-word;
width: 482;
}<div id="chat-bg">
<div id="chat-text">
<div>Normal chatbox, scrollbar working after overflow</div>
<div>Normal chatbox, scrollbar working</div>
<div>Normal chatbox, scrollbar working</div>
</div>
</div>
<div id="chat-bg">
<div id="chat-text-with-flex">
<div>Chat box with flex (to align message to bottom) but no scroll bar (problem)</div>
<div>Chat box with flex (to align message to bottom) but no scroll bar (problem)</div>
<div>Chat box with flex (to align message to bottom) but no scroll bar (problem)</div>
<div>Chat box with flex (to align message to bottom) but no scroll bar (problem)</div>
</div>
</div>
<form id="chat-form">
<input id="chat-input" type="text" style="width:500px" autocomplete="off">
</form>I am wondering if there is a way to enable scrolling with the Flexbox solution or if there are alternative solutions that can be explored. Any suggestions would be greatly appreciated.