How to make last added div visible in parent div.overflow-auto?

Question

Layout

Good day. Please suggest how to implement the following:
There is a div with the bootstrap class "overflow-auto".
When the button is clicked, a new div is added to it using js (append method).
The overflow-auto scrollbar is always at the top and the added divs are not visible at the bottom.
How to implement so that the scrollbar is always at the bottom and the last added div is visible?
Example: this is how whatsapp-web is implemented.

Answer 1

When adding an element, it is necessary to move the position of the scroll block to a position equal to the height of the scrollHeight. jQuery example
without jQuery
https://jsfiddle.net/Lms1y5vw/1/