title: Chat system with messages at the bottom of the div
body: <p>I am trying to build a simple chat system, like that facebook does with messenger, keep the new messages at bottom. But they add a header and keep the fix position whit the last message and of course the scrollbar</p>
  
  <p><a href="https://jsfiddle.net/zj1mz7sx/" rel="nofollow noreferrer">Here is my try... but no scrollbar and the header do not move too.</a><code></code></p>
  
  <p>keep in mind, I do not want a fixed header. The problem for as I did read is that "height:auto" in chat div makes it "flow", but that is what keep the chat height dynamic. 
  well ... if anyone has a better solution to keep the messages at bottom, with header at top and when the message reach the header gets sticky, please.</p>
  
  <p><a href="https://jsfiddle.net/cLtkt0sw/" rel="nofollow noreferrer">PS: With only the ccs3 display:flex, I been able to achieve my goal here.. very simple.. It's possible without ? even with JS</a>'    '</p>