Line height or vertical align in flexbox child

Question

Minimal working example: http://jsfiddle.net/3qxfknd7/

You can see that the A and B are both centered horizontally within their respective divs, but not vertically. The height is dynamic, and thus I cannot set the line-height to the font-size, because a button with larger font-size will have to determine the line-height. Next to that, the class large may or may not be present: I cannot assume it is present!

How am I going to do this?

<div class="button-group">
    <div class="button"><span>A</span></div>
    <div class="button"><span class="large">B</span></div>
</div>

.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;
}

Answer 1

Not sure if this is what you are after:

.button-group {
    display: flex;
    flex-flow: row nowrap;
}

.button {
    display:flex;
    align-items: center;
    flex: 1 0 auto;
    align-content: center;    
    justify-content: center;
    outline: 1px solid red;
}

.button span {
    font-size: 20px;
}

.button span.large {
    font-size: 40px;
}

<div class="button-group">
    <div class="button"><span>A</span></div>
    <div class="button"><span class="large">B</span></div>
</div>