title: text-overflow in combination with flexbox not working
body: <p>I have a container which is 300px wide with two flexed divs inside.<br>
  The second one is 100px wide and the other should take up the remaining space.<br>
  When I place text wider than the remaining 200px in the first div, it overflows and I can use <code>overflow: hidden</code> and <code>text-overflow: ellipsis</code> to add the <code>...</code> when the text overflows.<br>
  When I put a <code>h1</code> tag within the first div and add the <code>overflow</code> and <code>text-overflow</code> should create the same effect.<br>
  And it does (in Chrome), but in IE and Firefox the div grows larger and the ellipsis doesn't work.<br>
  When I remove the additional <code>h1</code> layer and update the css accordingly, the described behavior works as expected.  </p>
  
  <p>Or look at my <a href="http://jsfiddle.net/t20bgvdx/13/" rel="noreferrer">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      display: flex;
  }
  
  #container{
      display: flex;
      flex-basis: 300px;
      overflow: hidden;
  }
  
  #content{
      display: block;
      height: 300px;
      background-color: red;
      flex-grow: 1;
      flex-shrink: 1;
  }
  
  h1, h2{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  
  #menu{
      display: flex;
      flex-grow: 0;
      height: 300px;
      background-color: blue;
      flex-shrink: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
      &lt;div id="content"&gt;
          &lt;h1&gt;HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1&lt;h1&gt;
      &lt;/div&gt;
      &lt;div id="menu"&gt;xcvcxcxvcvxcvzxczxczgd&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>