Can anyone suggest a way to make the contents of a div (when they exceed the size of the div) to scroll to the bottom.
According to this answer from Jim Hall as refined in comments you can do it by adding an extra div with the following:
display: flex;
flex-direction: column-reverse
However, this is not working for me (contents just load scrolled to top with bottom content hidden.)
Here is my code:
CSS:
//The point of the next class is to force a scroll to the bottom but it is not working
.chatContainer {
height: 500px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
.chatContents {
width: 300px;
border: solid 1px #EEE;
display: flex;
flex-direction: column;
padding: 10px;
max-height: 500px;
overflow-y: scroll;
}
HTML:
<div class="chatContainer">
<div class="chatContents">
<div id = "bubbles"></div>
</div>
</div>
Would appreciate any suggestions on how to do this in pure CSS or with simple javascript (no jquery etc.)
Thanks for any suggestions.
Try limiting the size of the div which contains the chatbox kind of how i did in the following code:
var element = document.getElementById("chatbox");
element.scrollTop = element.scrollHeight;.chatContainer {
height: 500px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
.chatContents {
width: 300px;
border: solid 1px #EEE;
display: flex;
flex-direction: column;
padding: 10px;
max-height: 500px;
overflow-y: scroll;
height: 25vh;
overflow-x: hidden;
}<div class="chatContainer">
<div class="chatContents" id="chatbox">
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hello
</div>
<div id = "bubbles">
hellodjfdjfhdjfhsdhskfhsdkhfsdkhfjsdhf
</div>
</div>
</div>