Render content from the bottom

[EmiM]

Hello, is there a legitimate way to render content from the bottom? We used this renderView:

const renderView = props => {
  const style = {
    ...props.style,
    display: 'flex',
    flexDirection: 'column-reverse'
  }
  return <div {...props} style={style} />
}

But somehow it stopped working properly and if we use it, the scrollbar starts at the top and doesn't want to go down (only up). What we want to achieve is similar to what you can see in chats - scroll starting at the bottom and going up. Here is the example with renderVIew I mentioned: https://codesandbox.io/s/confident-fermi-n3q9q?file=/src/SpringScrollbarsExample.js

[Tomassito]

Hello @EmiM Why not use this.refs.scrollbars.scrollBottom(); on comonentDidMount , remove the flex styling and order the internal data the way you want before you provide it to the component?

[EmiM]

Thank you for the response. Yeah, scrollToBottom solves one problem but now I know why we used the 'column-reverse' (it was implemented before I became involved in the project). We load the content - messages - and at the beginning they appear one by one so the column-reverse has been used to enforce rendering them from the bottom. It worked till we upgraded electron from 8 to 12 :)