Aligning grandchild elements with flexbox - css

Question

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: http://codepen.io/anon/pen/EPZQZq (I updated the Codepen HTML/CSS to better reflect the challenge with my responsive layout.)
Some additional context: this is for a site that is responsive, so the width: 800px 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.
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;
}
<div id="container">
<div class="item">
<h1>Title TK</h1>
<div class="blob"></div>
<p>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.</p>
</div>
<div class="item">
<h1>A longer title TK TK TK</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="item">
<h1>A title that nobody could have possibly accounted for</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Answer 1

You want to control the height of .item h1. You can do it by either:
.item h1 {
min-height: 90px;
max-height: 90px;
}
or, the flexbox way:
.item h1 {
flex-basis: 90px;
flex-shrink: 0; /* if you don't want it to shrink */
flex-grow: 0; /* if you don't want it to grow */
}

Answer 2

Flexbox can't align or equalise items that do not share a common parent...so there is no native flexbox method here.
The header would need to be the same height in each column.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#container {
width: 90%;
font: 14px/22px"helvetica neue", sans-serif;
display: flex;
}
.item {
width: 33.33%;
display: flex;
flex-direction: column;
padding: 0 10px;
border: 1px solid grey;
}
.item h1 {
height: 120px;
}
.item .blob {
width: 100%;
height: 20px;
background: #dedede;
}
<div id="container">
<div class="item">
<h1>Title TK</h1>
<div class="blob"></div>
<p>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.</p>
</div>
<div class="item">
<h1>A longer title TK TK TK</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="item">
<h1>A title that nobody could have possibly accounted for</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>