title: text-overflow ellipsis not working in nested flexbox
body: <p>I have a two-column layout created with flexboxes.</p>
  
  <p>In the right column, I have two rows, the first containing a header and the second containing the page content.</p>
  
  <p>Within the header I have three columns, a button, some text, and a button.</p>
  
  <p>I want the buttons to sit on the left and right of the column with the text taking up any additional room.</p>
  
  <p>Finally, I want the text to have <code>white-space:nowrap</code> and <code>text-overflow:ellipsis</code> properties to truncate long titles.</p>
  
  <p>My problem is this: <strong>I cannot get the text wrapping to work correctly in a flexbox that is nested in another flexbox</strong>, as shown in this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/maxmumford/rb4sk3mz/3/" rel="noreferrer">http://jsfiddle.net/maxmumford/rb4sk3mz/3/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    height: 100vh;
  }
  .left {
    width: 200px;
    background-color: yellow;
  }
  .right {
    flex: 1;
    background-color: blue;
    color: white;
  }
  .header {
    background: red;
    color: white;
    display: flex;
    flex-direction: row;
  }
  .header .content {
    white-space: nowrap;
    flex: 0 1 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
  .header .buttons {
    background: green;
    flex: 1 0 auto;
  }
  .header .content:hover {
    white-space: normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div class="left"&gt;
      content left
    &lt;/div&gt;
    &lt;div class="right"&gt;
      &lt;div class="header"&gt;
        &lt;div class="buttons"&gt;buttons&lt;/div&gt;
        &lt;div class="content"&gt;
          This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex
        &lt;/div&gt;
        &lt;div class="buttons"&gt;buttons&lt;/div&gt;
      &lt;/div&gt;
      content right
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, the exact same code works when the header is not nested within a flex box:</p>
  
  <p><a href="http://jsfiddle.net/maxmumford/p7115f2v/1/" rel="noreferrer">http://jsfiddle.net/maxmumford/p7115f2v/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
    background: red;
    color: white;
    display: flex;
    flex-direction: row;
  }
  .header .content {
    white-space: nowrap;
    flex: 0 1 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
  .header .buttons {
    background: green;
    flex: 1 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;div class="buttons"&gt;buttons&lt;/div&gt;
    &lt;div class="content"&gt;
      This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long
      and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly...
    &lt;/div&gt;
    &lt;div class="buttons"&gt;buttons&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I achieve what I want in the first fiddle?</p>
  
  <p>Thanks</p>