title: Flexbox navbar, stretch links to be equal heights
body: <p>I have a navbar that has some links that wrap on to 2+ lines when the viewport is somewhat narrow. I'd like to make all of the nav items the same height and keep their text vertically centered. So far I've been able to vertically center everything but I'm having trouble getting the height of the <code>&lt;a&gt;'s</code> to all match. Please see codepen example below...</p>
  
  <p><a href="http://codepen.io/anon/pen/GovmZa" rel="nofollow">http://codepen.io/anon/pen/GovmZa</a></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>.container {
    width:950px;
    margin:0 auto;
  }
  
  ul {
    display:flex; 
    align-items: stretch; 
    justify-content: flex-start;
  }
  
  li {
    list-style-type:none; 
    display:flex;
    flex-grow:1;
    align-items:center;
    flex-direction: column;
    text-align:center;
    border:1px solid #fff;
    text-align:center;
  }
  
  a {
  
    color:#fff;
    padding:10px;
    margin-right:1px;
    flex: 1;
    display: flex;
    align-content: center;
    align-items: center;
    text-align:center;
    background-color:#000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;p&gt;How do I make the links stretch to be equal heights and keep text vertically aligned in the center?&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Can&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;somebody please help me figure&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;this&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;out&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>