CODEWITHSUNDEEP
htmlcssflexbox
Philipp Chapkovski
Philipp Chapkovski

Reputation: 2069

How make flex show elements from the bottom

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

Upvotes: 0

Views: 350

Answers (1)

Mileta Dulovic
Mileta Dulovic

Reputation: 1064

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 :)

Upvotes: 0

Related Questions