title: Flex items not wrapping in column-direction flexbox
body: <p>I have an <code>outerWrapper</code>, <code>innerWrapper</code>, and children. <code>outerWrapper</code> has a height of <code>300px</code>, and is <code>display: flex</code>. <code>innerWrapper</code> is also <code>display: flex</code>, and is <code>flex-direction: column</code>.</p>
  
  <p>When I add <code>align-items</code> with a value of anything but <code>stretch</code> to <code>outerWrapper</code>, the children display one long column. They ignore the <code>300px</code> height. Here's an image of how it displays:</p>
  
  <p><a href="https://i.stack.imgur.com/X5ieN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5ieN.png" alt="enter image description here"></a></p>
  
  <p>It should display like this:</p>
  
  <p><a href="https://i.stack.imgur.com/osL0x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/osL0x.png" alt="enter image description here"></a></p>
  
  <p>Just with <code>align-items: flex-end</code>.</p>
  
  <p>Why is this happening, and how can I use <code>align-items: flex-end</code> and have the children display like the second image?</p>
  
  <p><a href="https://jsfiddle.net/woba6o5p/" rel="nofollow noreferrer"><h3>JSFiddle</h3></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#outerWrapper {
    height: 300px;
    background-color: lightgreen;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
  }
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
  }
  li {
    list-style-type: none;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outerWrapper"&gt;
    &lt;ul id="innerWrapper"&gt;
      &lt;li class="child"&gt;I'm #01&lt;/li&gt;
      &lt;li class="child"&gt;I'm #02&lt;/li&gt;
      &lt;li class="child"&gt;I'm #03&lt;/li&gt;
      &lt;li class="child"&gt;I'm #04&lt;/li&gt;
      &lt;li class="child"&gt;I'm #05&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update</strong></p>
  
  <p>The answer to this question, is to add a height of <code>210px</code> to <code>innerWrapper</code>. But I need to get to that number using JavaScript, because the amount of boxes will be dynamic.</p>
  
  <p>I tried the following code:</p>
  
  <pre><code>innerWrapper.style.height = (lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight) + 'px';
  </code></pre>
  
  <p>but it didn't fix it. It just made the height to: 5 * 102 (5 = number of boxes; 102 = height + border).</p>
  
  <p>How can I set the correct height to <code>innerWrapper</code> using JavaScript? (I can't do height: 100% because I won't be able to set align-items: flex-end or center.)</p>
  
  <p><a href="https://jsfiddle.net/9qvjgb66/" rel="nofollow noreferrer"><h3>JSFiddle</h3></a></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-js lang-js prettyprint-override"><code>var innerWrapper = document.getElementById('innerWrapper');
  var lastChild = innerWrapper.lastElementChild;
  newHight = lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight;
  innerWrapper.style.height = newHight + 'px';</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#outerWrapper {
    height: 300px;
    background-color: lightgreen;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
  }
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    /*height: 206px;*/
  }
  li {
    list-style-type: none;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outerWrapper"&gt;
    &lt;ul id="innerWrapper"&gt;
      &lt;li class="child"&gt;I'm #01&lt;/li&gt;
      &lt;li class="child"&gt;I'm #02&lt;/li&gt;
      &lt;li class="child"&gt;I'm #03&lt;/li&gt;
      &lt;li class="child"&gt;I'm #04&lt;/li&gt;
      &lt;li class="child"&gt;I'm #05&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>