Scroll position at chatbox is not moving to the newest messages

#1

What seems to be the problem:
I’m building a live chat system with livewire and alpinejs. The chat system is work, but I don’t have any idea to keep the chat box scroll at bottom of the element when adding new chats.

Are you using the latest version of Livewire: yes

#2

I used flexbox (flex-direction) to fix that:

<div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum perferendis obcaecati delectus velit molestias neque eligendi illum, ipsa autem, sint, dicta similique hic consectetur! Dolorem harum quasi deserunt in fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum perferendis obcaecati delectus velit molestias neque eligendi illum, ipsa autem, sint, dicta similique hic consectetur! Dolorem harum quasi deserunt in fugit.
</div>

.box {
    width: 100px;
    display: flex;
    flex-direction: column-reverse;
    max-height: 100px;
    overflow-y: auto;
}