text-overflow: ellipsis and flex

Question

I have a container element with display: flex property set. A children have fixed width (flex: 0 0 auto), another one no (flex: 1). The flexible children has some other children: I want this container (inner) to clip its children according to the parent width.

I managed to do this, but also I'd like to get the ellipsis overflow in case the content is clipped (the number of children is not fixed).

This is my code so far:

.outer {
  border: 1px solid red;
  display: flex;
  width: 400px;
}

.inner {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
}

.child {
  display: inline-block;
  white-space: nowrap;
  flex: 1;
  border: 1px solid blue;
}

.btn {
  border: 1px solid green;
  flex: 0 0 auto;
}

Live here: http://jsbin.com/niheyiwiya/edit?html,css,output

How can I get the following desired result? (hacks welcome - css only please!)

Answer 1

There are a few problems with your layout:

1. text-overflow: ellipsis only works with display: block and display: inline-block containers. It's failing because you have .inner set to display: flex.

2. text-overflow: ellipsis must include white-space: nowrap in the same declaration. It's missing in your .inner rule.

3. ellipsis works on text, not block-level elements

Try this:

* {
  margin: 15px 1px
}
.outer {
  border: 1px solid red;
  display: flex;
  width: 400px;
}
.inner {
  /* display: flex */          /* removed */
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;         /* new */
}
.child {
  display: inline;             /* adjusted */
  white-space: nowrap;
  flex: 1;
}
.btn {
  border: 1px solid green;
  flex: 0 0 auto;
}

<div class="outer">
  <div class="inner">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
    <div class="child">child 5</div>
    <div class="child">child 6</div>
    <div class="child">child 7</div>
  </div>
  <div class="btn">My big big big button!</div>
</div>

More about text-overflow: ellipsis here: Applying an ellipsis to multiline text