title: How to style conversations like Facebook private messages
body: <p>I'm setting up private conversations between users on a site. I like Facebook private messages UI and plan to implement it similarly. </p>
  
  <p>I'm having a hard time trying to implement this due that it uses different css positions in order to align elements on screen correctly. Here is my problem summarized.</p>
  
  <p><img src="https://i.stack.imgur.com/Vp8PD.jpg" alt="enter image description here"></p>
  
  <ol>
  <li>The width should be the 100% of the width available where it is placed. Thats mostly auto.</li>
  <li>The height should go from the current point until the end of the page. If I use <code>position: fixed</code> I lost somehow the auto width of point (1) and need to set it manually. </li>
  <li>This is the most tricky. How can I position the write message at bottom and yet get messages to have an auto height inside its container based on its container height and write message presence?</li>
  </ol>