Text overflow dots not working in nested flexbox

Question

I have a two-column layout created using flexboxes.

In the right column, I have two lines: the first contains the title, and the second contains the content of the page.

Inside the header there are three columns, a button, text and a button.

I want the buttons to sit to the left and right of the column with text occupying any extra room.

Finally, I want to have the text properties white-space:nowrapand text-overflow:ellipsisto truncate the long names.

My problem is this: I cannot get the text shell to work correctly in flexbox, which is nested in another flexbox , as shown in this script:

http://jsfiddle.net/maxmumford/rb4sk3mz/3/

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

<div class="container">

  <div class="left">
    content left
  </div>
  <div class="right">
    <div class="header">
      <div class="buttons">buttons</div>
      <div class="content">
        This content is really long and should wrap with ellipses, but for some reason it doesn't work when it nested in a container with display: flex
      </div>
      <div class="buttons">buttons</div>
    </div>
    content right
  </div>

</div>

Run codeHide result

However, the same code works when the header is not nested in the flex field:

http://jsfiddle.net/maxmumford/p7115f2v/1/

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

<div class="header">
  <div class="buttons">buttons</div>
  <div class="content">
    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...
  </div>
  <div class="buttons">buttons</div>
</div>

Hide result

, ?

Answer 1

, :

• div.right div.header, , , .

  div.right (.container).

  . flex - min-width: auto.

  , , , . - min-width: 0.

  .content flex, .right.

• .content, flex: 0 1 auto.

  flex (flex-basis: auto). .

  0 flex , . flex: 1 1 0, flex: 1.

.container {
  display: flex;
  height: 100vh;
}
.left {
  width: 200px;
  background-color: yellow;
}
.right {
  flex: 1;
  background-color: blue;
  color: white;
  min-width: 0;             /* NEW */
}
.header {
  background: red;
  color: white;
  display: flex;
  flex-direction: row;
}
.header .content {
  white-space: nowrap;
  flex: 1;                  /* ADJUSTMENT */
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}
.header .buttons {
  background: green;
  flex: 1 0 auto;
}
.header .content:hover {
  white-space: normal;
}

<div class="container">

  <div class="left">
    content left
  </div>
  <div class="right">
    <div class="header">
      <div class="buttons">buttons</div>
      <div class="content">
        This content is really long and should wrap with ellipses, but for some reason it doesn't work when it nested in a container with display: flex
      </div>
      <div class="buttons">buttons</div>
    </div>
    content right
  </div>

</div>

Hide result

Answer 2

:

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

, .

.header .content:

.header .content {
    width: 50%;
}

, :
http://jsfiddle.net/t82pqks4/