Load dynamic content at the bottom of a div

Question

I've connected to a websocket and pull real-time data from the server once the page is loaded. However, I want it to load from the bottom-up and not from the top-down of the div. I'm hoping I can keep it scrolled to the bottom of the div unless the user scrolls up in this case.

Here's what I'm currently working with

(I'm planning to also pull more data from their REST API and preload the div with 100-50 messages prior so the user doesn't see nothing upon the initial page load. Though, I'm sure that'll be another question 😂)

I've tried using

display: 'flex', flexDirection: 'column-reverse'

but that alone doesn't seem to be the solution in this case. overflow? I'm not sure

Here is the parent .js file that the component is within:

     <Layout style={{ minHeight: '100vh' }}>
       <div style={{width: '100%', height: '100%'}}>
         <Header id="header">
         </Header>

         <Content style={{ padding: '24px 50px 0px 50px' }}>
           <div style={{ borderRadius: '6px', border: '1px solid rgb(235, 237, 240)', background: '#fff'}}>
             <Tbox/>
           </div>
         </Content>
         <Footer/>
       </div>
     </Layout>

And then here is the component itself:

  render() {

    const chatBox = 
      <List 
        dataSource={this.state.data}
        renderItem={item => (
          <List.Item >
            <List.Item.Meta
              avatar={<Avatar size="large" icon="user" />}
              title={<div><a href="https://example.com">{item.user}</a> {item.date}</div>}
              description={item.message}
            />
          </List.Item>
        )}
      />;

    return (
      <div>
        <div style={{ height: 400 }}>
          <Scrollbars style={{ height: 400 }}>
            <section style={{display: 'flex !important', flexDirection: 'columnReverse !important' }}>
              <div>
                {chatBox}
              </div>
            </section>
          </Scrollbars>
        </div>


        <div style={{ width: '100%', padding: 0 }}>
          ...
        </div>

      </div>
    );
  }

Answer 1

As mentioned before by Daan, if you can post the result page, it would help since after that the CSS rule can be applied to the result list. Take look at this how-to-display-a-reverse-ordered-list-in-html

Hope this could help