title: CSS to align 3 layout elements for a chat interface
body: <p><img src="https://i.stack.imgur.com/IuO2N.jpg" alt="chat layout"></p>
  
  <p>I am trying to build a chat interface in a browser window, I cannot get the CSS right, I tried for around 10 hours.</p>
  
  <p>Cell #1 and #3 are fixed</p>
  
  <p><strong>Edit:</strong> #3 should be a fixed height too e.g 80px; the rest of the window height will be used by the #2.</p>
  
  <p>Cell #2 (the large one) in the middle will contain the chat lines and any window resize should put the scrollbar on that one, not on the full window.
  Cell #2 should also align the content at the bottom, so that only 1-2 lines will <strong>not</strong> be far away on the top of the window.</p>
  
  <p>I was able to do it near-perfect using this CSS on cell #2:</p>
  
  <pre><code>flex-direction:column;
  flex-flow: row wrap;
  align-content:flex-end;
  </code></pre>
  
  <p>But it would not place scroll-bars on that cell, only IE does it.
  I am thinking there must be a cleaner way, because my CSS looks ugly, I even tried with tables. </p>
  
  <p><a href="http://codepen.io/adrianTNT/pen/meLCk" rel="nofollow noreferrer">Here is what I have now</a>, I guess it is hard to read</p>