title: Flexbox issue across browsers
body: <p>I am experiencing an issue with flexbox layout which only manifests in IE11 (go figure!). Both Firefox and Chrome render the layout fine. </p>
  
  <p>See for yourself
  <a href="http://codepen.io/anon/pen/gbEoKb" rel="nofollow">http://codepen.io/anon/pen/gbEoKb</a></p>
  
  <p>Page title and Subtitle are horizontally centered in IE11, which means align-items:baseline is kicking in which it shouldn't because it's intended for vertical centering/baselining.</p>
  
  <p>Which rendering is correct, IE's or the other one?</p>
  
  <p>Did I miss something in my CSS?</p>
  
  <p>P.S. For some reason, SO wants me to paste code from codepen.io, so I'm only pasting the markup here</p>
  
  <pre><code>&lt;header class="site-headers flex-block flex-justified flex-fixed"&gt;
      &lt;aside class="titles flex-block"&gt;
          &lt;h1&gt;Page title&lt;/h1&gt;
          &lt;h4&gt;Subtitle&lt;/h4&gt;
      &lt;/aside&gt;
      &lt;aside class="additional flex-block"&gt;
    &lt;h3&gt;Additional&lt;/h3&gt;
      &lt;/aside&gt;
  &lt;/header&gt;
  </code></pre>