text-overflow ellipsis on flex child not working [duplicate]

Answer 1

Is this what you want.?

I just put overflow:hidden;text-overflow: ellipsis; to your .child2

function toggle() {
  var el = document.querySelector('.el');
  el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';
}

.wrapper {
  display: flex;
  width: 200px;
  align-content: stretch;
  padding: 5px;
  min-width: 0;
  border: 1px solid
}

.wrapper .child2 {
  flex-grow: 1;
}

.flex {
  display: flex;
  min-width: 0;
}

.el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
  overflow:hidden;
  text-overflow: ellipsis;
}

.child3 {
  background: green;
}

.wrapper>* {
  padding: 5px;
}

<div class="wrapper">
  <div class="child1">child1</div>
  <div class="child2">
    <div class="flex">
      <div class="el">long long long text</div>
      <div>a</div>
    </div>
  </div>
  <div class="child3">child3</div>
</div>

<button onclick="toggle()">Toggle ellipsis text</button>

Answer 2

Add overflow: hidden; to .wrapper .child2.

Actually, as Mosh Feu suggests in his answer, min-width: 0 should also work, and does, cross browser, though IE is buggy and need overflow

The reason also the child2 need it, is because it is also a flex item, and flex item's, in this case min-width, defaults to auto, and won't allow it to be smaller than its content, so by adding overflow: hidden (or any value but visible), or min-width: 0, will let it.

function toggle() {
  var el = document.querySelector('.el');
  el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';
}

.wrapper {
  display: flex;
  width: 200px;
  align-content: stretch;
  padding: 5px;
  min-width: 0;
  border: 1px solid
}

.wrapper .child2 {
  flex-grow: 1;
  overflow: hidden;
}

.flex {
  display: flex;
  min-width: 0;
}

.el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.child1 {
  background: red;
}

.child2 {
  background: lightblue;
}

.child3 {
  background: green;
}

.wrapper>* {
  padding: 5px;
}

<div class="wrapper">
  <div class="child1">child1</div>
  <div class="child2">
    <div class="flex">
      <div class="el">long long long text</div>
      <div>a</div>
    </div>
  </div>
  <div class="child3">child3</div>
</div>

<button onclick="toggle()">Toggle ellipsis text</button>

Answer 3

Apparently if I set the min-width: 0 of the middle child (.child2) it magically works.

Update According @LGSon it doesn't works on IE.

function toggle() {
  var el = document.querySelector('.el');
  el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';
}

.wrapper {
  display: flex;
  width: 200px;
  align-content: stretch;
  padding: 5px;
  min-width: 0;
  border: 1px solid
}

.wrapper .child2 {
  flex-grow: 1;
  min-width: 0;
}

.flex {
  display: flex;
}

.el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

.child3 {
  background: green;
}

.wrapper>* {
  padding: 5px;
}

<div class="wrapper">
  <div class="child1">child1</div>
  <div class="child2">
    <div class="flex">
      <div class="el">long long long text</div>
      <div>a</div>
    </div>
  </div>
  <div class="child3">child3</div>
</div>

<button onclick="toggle()">Toggle ellipsis text</button>

Answer 4

That's because class .el doesn't have a width set. Use the CSS below and it works well:

.el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 3em;
}