title: Aligning grandchild elements with flexbox
body: <p>I am learning flexbox and still not sure I fully understand how all the parts fit together. I would like to vertically align these columns so that the gray boxes line up with each other: <a href="http://codepen.io/anon/pen/EPZQZq" rel="nofollow noreferrer">http://codepen.io/anon/pen/EPZQZq</a> (I updated the Codepen HTML/CSS to better reflect the challenge with my responsive layout.)</p>
  
  <p>Some additional context: this is for a site that is responsive, so the <code>width: 800px</code> may be a bit misleading. And the gray bars can't be replaced by borders, they're meant to be stand-ins for actual content.</p>
  
  <p>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 {
    box-sizing: border-box;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  #container {
    width: 800px;
    font: 14px/22px "helvetica neue", sans-serif;
    display: flex;
  }
  
  .item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
  }
  
  .item .blob {
    width: 100%;
    height: 20px;
    background: #dedede;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div class="item"&gt;
      &lt;h1&gt;Title TK&lt;/h1&gt;
      &lt;div class="blob"&gt;&lt;/div&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;h1&gt;A longer title TK TK TK&lt;/h1&gt;
      &lt;div class="blob"&gt;&lt;/div&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;h1&gt;A title that nobody could have possibly accounted for&lt;/h1&gt;
      &lt;div class="blob"&gt;&lt;/div&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>