0

In a typical chat bot window, or messenger window, when you type in a new message it appears at the bottom of the chat history flow, and everything else in the list goes up - so user is always able to see the last message. And when the history of a chat becomes longer, the chat window itself doesn't grow endlessly - just the older items are pushed higher and visually disappear (although you can scroll back to them).

I tried to imitate this behaviour using flex wrapper and flex-direction: column-reverse for a 'chat history' div inside, but I can't figure it out.

Here is my attempt: https://codepen.io/chapkovski/full/gOOKGwJ

Now (a) the 'chat history' or whatever the content is there, is shown from the top, and when you type a new element there, the window just 'expands' Any links or hints to the right direction would be appreciated

Philipp Chapkovski
  • 1,949
  • 3
  • 22
  • 43
  • 1
    Check these posts out for possible guidance: [one](https://stackoverflow.com/q/33513957/3597276), [two](https://stackoverflow.com/q/49598338/3597276) and [three](https://stackoverflow.com/q/41922842/3597276). – Michael Benjamin Nov 08 '19 at 20:51

1 Answers1

0

This is your structure

<section>
   <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</section>

All you need to do is add this css

ul {
    display: flex;
    flex-direction: column-reverse;
}

This will tell ul element to be flex and display your children in column (one above another) and in reversed order (bottom will go first).

I hope it helped :)

Mileta Dulovic
  • 1,036
  • 1
  • 14
  • 33