You need min-height property to make it work
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();
chatText2.innerHTML += "<div>" + chatInput.value + "</div>";
$("#chat-bg").scrollTop($("#chat-bg")[0].scrollHeight);
};
#chat-bg {
position: relative;
height: 100%;
width: 519px;
height: 141px;
overflow: auto;
}
#chat-text-with-flex {
margin-top: 5;
padding-left: 10;
border: solid 1px black;
background-color: red;
width: 502px;
height: auto;
overflow: scroll;
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat-bg">
<div id="chat-text-with-flex">
<div> the problem is fixed 1</div>
<div> the problem is fixed 2</div>
<div> the problem is fixed 3</div>
<div> the problem is fixed 4</div>
<div> the problem is fixed 5</div>
</div>
</div>
<form id="chat-form">
<input id="chat-input" type="text" style="width:500px" autocomplete="off">
</form>
This was my goal for my chatbox:
Align multiple divs to bottom of parent
However, the issue is that it won’t create a scrollbar after overflow.
This is without Flex:
This is after applying Flex in order to align messages to bottom, however won’t allow me to scroll:
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>
Is it possible to scroll with the flexbox fix? I’m open to other solutions
The problem is, you’ll have to scroll to see new messages and my goal is a ‘bottom-up’ chatbox
@Dan Edited my code for scoll to bottom. using jQuery
