title: How to get flexbox align-items flex-end to work in WebKit/Blink?
body: <p>I'm trying to nest a flexbox in another flexbox. The outer box is vertical:</p>
  
  <pre><code>+------+
  |      |
  +------+
  |      |
  |      |
  |      |
  +------+
  </code></pre>
  
  <p>Where the top area fits the content <code>flex 0 1 auto</code> and the bottom half fills the remaining space <code>flex 1 1 auto</code>.</p>
  
  <p>In the bottom half I have another flex-box going horizontal. I want the 2 inner boxes to be space-between across and flex-end for align-items so basically the 2 inners are pinned to the left and right bottom corners like this:</p>
  
  <pre><code>+------+
  |      |
  +-+  +-|
  |L|  |R|
  +------+
  </code></pre>
  
  <p>Setting this up seems to work in Firefox but in Chrome(Blink) and Safari I get this:</p>
  
  <pre><code>+------+
  |      |
  |      |
  |      |
  +-+--+-|
  |L|  |R|
  +-+  +-+
  </code></pre>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;div id="outer"&gt;
      &lt;div id="top"&gt;
          top
      &lt;/div&gt;
      &lt;div id="bottom"&gt;
          &lt;div id="bottomcontents"&gt;
              &lt;div id="botleft"&gt;
                  bottom left
              &lt;/div&gt;
              &lt;div id="botright"&gt;
                  bottom right
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And there's the CSS</p>
  
  <pre><code>* {
      box-sizing: border-box;
      -moz-box-sizing: border-box;   
  }
  
  html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      border: 0px;
  }
  
  #outer {
      height: 100%;
      border: 1px solid red;
      display: flex;
      display: -webkit-flex;
      flex-flow: column;
      -webkit-flex-flow: column;
      justify-content: center;
      align-content: center;
      align-items: center;
      -webkit-justify-content: center;
      -webkit-align-content: center;
      -webkit-align-items: center;
      min-height: auto;    
  }
  #top {
      width: 100%;
      flex: 0 1 auto;
      -webkit-flex: 0 1 auto;
      border: 1px solid blue;
  }
  #bottom {
      width: 100%;
      height: 100%;
      flex: 1 1 auto;
      -webkit-flex: 1 1 auto;
      border: 1px solid green;
  }
  #bottomcontents {
      height: 100%;
      width: 100%;
      border: 1px solid pink;
      display: flex;
      display: -webkit-flex;
      flex-flow: row;
      -webkit-flex-flow: row;
      justify-content: space-between;
      align-content: center;
      align-items: flex-end;
      -webkit-justify-content: space-between;
      -webkit-align-content: center;
      -webkit-align-items: flex-end;
      min-height: auto;        
  }
  
  #botleft, #botright {
      flex: 0 1 auto;
      -webkit-flex: 0 1 auto;
  }
  #botleft {
      border: 1px solid purple;
  }
  #botright {
      border: 1px solid cyan;
  }
  </code></pre>
  
  <p>And <a href="http://jsfiddle.net/greggman/MmM95/" rel="nofollow noreferrer">here's a fiddle</a></p>
  
  <p>It works as expected in Firefox. Did I do something wrong? Is this a bug in Chrome and Safari? Is there a workaround?</p>