I've had a problem with scrolling div with using flex-direction: column-reverse;

Here is my 'visible' part of code:

.messagesBox {
  overflow-y: scroll;
  padding: 10px;
  row-gap: 2px !important;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  width: "100%";
}

<div
   id="messagesBox"
   onScroll={onScroll}
   className={styles.messagesBox}
>
   {renderContent()}
</div>

I create this div to display an array of object, set vertically with scrool sticky to bottom thanks to column-reverse (i need to use this because i have no contact with server side).

Here is my onScroll function:

  const onScroll = () => {
    const box = document.getElementById("messagesBox");
    console.log(box.scrollTop);//-267 on top div, 0 on bottom div, I need reverse this values
  }

when I scroll my div to top the scrollTop function return me bad values, when I'm on top she return me some negative values like -267.7, but when i scroll to bottom then return me 0.

Can someone tell me how to get correct values and get 0 from scrollTop when scrool is on top?

Thanks for any help!

////////////////////////////