text-overflow ellipsis not working in nested flexbox

Question

I have a two-column layout created with flexboxes.

In the right column, I have two rows, the first containing a header and the second containing the page content.

Within the header I have three columns, a button, some text, and a button.

I want the buttons to sit on the left and right of the column with the text taking up any additional room.

Finally, I want the text to have white-space:nowrap and text-overflow:ellipsis properties to truncate long titles.

My problem is this: I cannot get the text wrapping to work correctly in a flexbox that is nested in another flexbox, as shown in this fiddle:

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

However, the exact same code works when the header is not nested within a flex box:

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>

How can I achieve what I want in the first fiddle?

Thanks

Answer 1

There are two issues in your code preventing the ellipsis from working:

1. div.right contains div.header, which in turn contains the button and text.

   div.right is a flex item in the main container (.container).

   By default, a flex item cannot be smaller than the size of its content. The initial setting on flex items is min-width: auto.

   This means that the length of your text, which is not wrapping, will set a minimum size for parent flex items. One way to enable flex items to shrink past their content is to set a flex item to min-width: 0.

   You've done this already for the .content flex item, but it needs to be set on the .right item, as well.

2. You've got the .content element set to flex: 0 1 auto.

   This tells the flex item to use the size of the content (flex-basis: auto). The text sets the size.

   Instead, set the width to 0 and let the flex container distribute space, as necessary. You can do this with flex: 1 1 0, which is the same as 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's nested in a container with display: flex
      </div>
      <div class="buttons">buttons</div>
    </div>
    content right
  </div>

</div>

revised fiddle