title: align-items property not working correctly
body: <p>For some reason the <code>align-items</code> property is not working properly.</p>
  
  <p><code>Justify-content</code> is working fine, and I'm trying to figure out why <code>align-items</code> is not working, because the height of the <code>.right</code> container class is just as high as the parent div, or so it should be.</p>
  
  <p>I'm trying to apply <code>space-between</code> but my two elements are not spreading.</p>
  
  <p>And actually it seems as though height is set to <code>auto</code> for all the columns even though I put 100% for height so I'm not sure what's going on.</p>
  
  <p>I've set <code>auto</code> for the innermost children, but not for the immediate children of <code>.container</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
  }
  #bigwrap {
    position: relative;
  }
  .left,
  .middle,
  .right {
    border-right: 1px solid blue;
  }
  .left {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    flex: 1 20%;
    height: 100%;
  }
  .left img {
    max-width: 100%;
  }
  .middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    flex: 2 20%;
    height: 100%;
  }
  .right {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: space-between;
    justify-content: center;
    order: 3;
    flex: 1 50%;
    height: 100%;
  }
  div.list {
    display: flex;
    flex-flow: row wrap;
    width: 70%;
    justify-content: center;
    line-height: 300%;
    ;
    border: 1px solid pink;
  }
  .right .list {
    // text-align: center;
    height: auto;
  }
  .list ul {
    list-style: none;
    padding: 0;
  }
  .list a {
    text-decoration: none;
    color: inherit;
  }
  .headbox h3 {
    color: orange;
  }
  .container {
    display: flex;
    //position: absolute;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
    width: 70%;
    margin: 5% auto 8% auto;
    background-color: white;
  }
  .container p {
    margin-bottom: 12%;
  }
  .container img {
    margin-bottom: 10%;
  }
  .container img:first-child {
    margin-top: 5%;
  }
  .middle p:first-child {
    margin-top: 8%;
  }
  .left,
  .middle,
  .right {
    border-right: 1px solid blue;
  }
  .left {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    flex: 1 20%;
    height: 100%;
  }
  .left img {
    max-width: 100%;
  }
  .middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    flex: 2 20%;
    height: 100%;
  }
  .right .list {
    height: auto;
  }
  .list ul {
    list-style: none;
    padding: 0;
  }
  .list a {
    text-decoration: none;
    color: inherit;
  }
  .headbox h3 {
    color: orange;
  }
  .right .headbox {
    border: 1px solid orange;
    width: 70%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bigwrap"&gt;
    &lt;div class="container"&gt;
      &lt;div class="left"&gt;
        &lt;img src="cat1.jpeg" alt="Picture of kid"&gt;
        &lt;img src="cat1.jpeg" alt="Picture of kid"&gt;
      &lt;/div&gt;
      &lt;div class="middle"&gt;
        &lt;div class="box"&gt;
          &lt;p&gt;
            Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="box"&gt;
          &lt;p&gt;
            Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="box"&gt;
          &lt;p&gt;
            Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;div class="headbox"&gt;
          &lt;h3&gt;Visit Us&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="list"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Hours&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Plan&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Directions&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>