跨浏览器的Flexbox问题

Question

我遇到了flexbox布局的问题，只能在IE11中出现（如图！）。 Firefox和Chrome都可以很好地呈现布局。

亲自看看 http://codepen.io/anon/pen/gbEoKb

页面标题和字幕在IE11中水平居中，这意味着对齐项目：基线正在踢它不应该因为它用于垂直居中/基线。

哪种渲染是正确的，是IE还是另一种？

我在CSS中遗漏了什么吗？

P.S。出于某种原因，SO希望我从codepen.io粘贴代码，所以我只是在这里粘贴标记

<header class="site-headers flex-block flex-justified flex-fixed">
    <aside class="titles flex-block">
        <h1>Page title</h1>
        <h4>Subtitle</h4>
    </aside>
    <aside class="additional flex-block">
  <h3>Additional</h3>
    </aside>
</header>