text-overflow ellipsis not working in nested flexbox

Question

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

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

Leave a Comment Cancel reply