Python - SocketIO Project - Msgs returned in HTML does not jump to end of DIV

I have a problem to solve with the scrollbar in html. I made a chat using socketio and the messages are being presented in a DIV inside an ASIDE. The problem is that when the scrollbar is mounted it leaves the thumb at the beginning. This impairs the navigability and reading of the chat. I would like it to stay in the end of messages.

I'm looking for routines or commands that after assembly, would scroll the bar to the end. Could ScrollTo() help me? If so, where to put it? On CSS? OnJavaScriptCode? On Server Side?

I would like your help. Thanks.

Below is the simplified routine to optimize the understanding of the problem.

app in python

from flask.app import Flask from flask.templating import render_template from flask_socketio import SocketIO, emit, send

app = Flask(_name_) io = SocketIO(app)

messages = []

@app.route("/") def home(): return render_template("chat.html")

@io.on('sendMessage') def send_message_handler(msg): print(msg) messages.append(msg) emit('getMessage', msg, broadcast=True)

@io.on('message') def message_handler(msg): send(messages)

if _name_ == "_main_": io.run(app, debug=False, allow_unsafe_werkzeug=True)

Html code part

<aside>
    <div class="chat"></div>
</aside>

CSS

       main { display:flex;}

        .chat {
            display: flex;
            flex-direction: column;
            height:100%
            margin-top: 2em;
            float: left; /* Make this div as wide as its contents */
            min-height: 96vh;
            padding-left: 1em;
            padding-top: 3em;
            padding-right:1em;
            border-right: 0.5px solid #898c91;
}

        }
        .chat span {
            margin-bottom: 10px;
        }
        form {
            margin-top: 10px;
        }
        aside {
            overflow:hidden;
            overflow-y:scroll;
            height:300px;
            width:45vh;
            background: red;
            scroll-snap-align: end;
        }

Javascript code

    window.onload = function() {
        const socket = io('http://127.0.0.1:5000');

        function addToChat(msg) {
            const span = document.createElement("span");
            const chat = document.querySelector(".chat");
            span.innerHTML = `<strong>${msg.name}:</strong> ${msg.message}`;
            chat.append(span);
        }

        socket.on('connect', () => {
            socket.send('Usuário conectado ao socket!')
        });

        document.querySelector("form").addEventListener("submit", function(event) {
            event.preventDefault();

            socket.emit('sendMessage', {name: event.target[0].value, message: event.target[1].value})
            event.target[0].value = "";
            event.target[1].value = "";
        })

        socket.on('getMessage', (msg) => {
            addToChat(msg)
        })


        socket.on('message', (msgs) => {
            for(msg of msgs) {
                addToChat(msg)
            }
        })

    }