title: How can i move a flex item in a container to the bottom?
body: <p>Hello i have 2 flex items which is wrapped in a container. I want the div containing the button to be placed at the bottom of the parent div but in the demo the div is placed next to the sibling which makes the bottom place unused.</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-html lang-html prettyprint-override"><code>&lt;div style="display:flex;flex-direction:row"&gt;
    &lt;div style="display:flex;flex-direction:column;border:1px solid black;width:200px"&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;1&lt;/div&gt;
      &lt;div&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="display:flex;flex-direction:column;border:1px solid black;width:200px"&gt;
      &lt;div  style="display:flex;flex-direction:column;border:1px solid green;width:150px" id="child1"&gt;
        &lt;div&gt;1&lt;/div&gt;
        &lt;div&gt;1&lt;/div&gt;
        &lt;div&gt;1&lt;/div&gt;
        &lt;div&gt;1&lt;/div&gt;
        &lt;div&gt;1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="display:flex;flex-direction:row" id="child2"&gt;
        &lt;button&gt;Add&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how i am creating the UI, i want the div which has id "child1" to take maximum height of the parent and should place the div with id "child2" at the bottom of parent div.Somebody help me in doing this</p>