title: Push divs down in containing div with CSS
body: <p>I would like to build a sort of "stack" of divs (with class .inner) within a containing div (#container) where each inner is pushed as far down in the container as possible without overlapping another inner. I've included illustrations of what this would look like with one and three inners, respectively:</p>
  
  <p><a href="https://i.stack.imgur.com/SQ632.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SQ632.png" alt="Example with one inner"></a>
  
  <a href="https://i.stack.imgur.com/9a9cE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9a9cE.png" alt="Example with three inners"></a>
  </p>
  
  <p>I know I could get the result on the left by setting...</p>
  
  <pre><code>#container { position: relative; }
  
  .inner {
     position: absolute;
     bottom: 0;
  }
  </code></pre>
  
  <p>...but this solution would not scale to the example on the right - instead it would cause all of the inners to overlap one another. Is there any good way to accomplish what I want through CSS alone for an arbitrary number of inners? I know I could do it with some hacky Javascript.</p>