title: CSS Position list to bottom so last list item is visible
body: <p>Wondering how I can position a list so the last item is always the first to be visible, I've positioned the list <code>absolute: bottom</code> but not sure how to make the contents scrollable, can anyone offer any suggestions? Is there a way of doing this with flex box? My problem is for the contents scroll I have to set <code>height: 100%</code> on <code>div.chat__inner</code>, this immediately jumps the list to the top.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    .chat {
      position: relative;
      height: 200px;
      width: 200px;
      border: 1px solid #000;
      overflow: hidden;
  }
  
  .chat__inner {
      position: absolute;
      bottom: 0;
  }
  
  .messages {
      overflow: auto;
      -webkit-user-select: none;
      -webkit-overflow-scrolling: touch;
      height: 100%;
      margin: auto;
  }
  </code></pre>
  
  <p>Fiddle <a href="http://jsfiddle.net/kyllle/jf2rvzag/" rel="nofollow">http://jsfiddle.net/kyllle/jf2rvzag/</a></p>