title: Line height or vertical align in flexbox child
body: <p>Minimal working example: <a href="http://jsfiddle.net/3qxfknd7/" rel="nofollow">http://jsfiddle.net/3qxfknd7/</a></p>
  
  <p>You can see that the <code>A</code> and <code>B</code> are both centered horizontally within their respective divs, but not vertically. The height is dynamic, and thus I cannot set the <code>line-height</code> to the <code>font-size</code>, because a button with larger <code>font-size</code> will have to determine the <code>line-height</code>. Next to that, the class <code>large</code> may or may not be present: I cannot assume it is present!</p>
  
  <p>How am I going to do this?</p>
  
  <pre><code>&lt;div class="button-group"&gt;
      &lt;div class="button"&gt;&lt;span&gt;A&lt;/span&gt;&lt;/div&gt;
      &lt;div class="button"&gt;&lt;span class="large"&gt;B&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .button-group {
      display: flex;
      flex-flow: row nowrap;
      align-content: flex-start;
      justify-content: flex-start;
  }
  
  .button {
      flex: 1 0 auto;
      text-align: center;
      outline: 1px solid red;
  }
  
  .button span {
      font-size: 20px;
  }
  
  .button span.large {
      font-size: 40px;
  }
  </code></pre>