title: Can't align an element in flexbox
body: <p>I'm currently trying to align the last element in a flexbox with a height higher than its elements at the bottom of the flexbox, but I can't manage to do it. I know I can use align-content: stretch which is the default behavior, but I don't want gaps between my elements.</p>
  
  <p>I just want "More Stuff" to be at the bottom of the box and aligned to the right, and I can't figure out how to do it by reading through the flexbox spec.</p>
  
  <p><a href="https://jsfiddle.net/k8dec2bx" rel="nofollow noreferrer">https://jsfiddle.net/k8dec2bx</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="flex"&gt;
    &lt;img/&gt;
    &lt;div&gt;
      &lt;p&gt;
        Stuff
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="bottom"&gt;
      &lt;p&gt;
        More Stuff
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.flex{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 500px;
    height: 600px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  }
  
  img{
    width: 100%;
    height: 250px;
  }
  
  .flex div{
    width: 100%;
  }
  
  .bottom{
    align-self: flex-end;
    text-align: right;
  }
  </code></pre>