css - text-overflow ellipsis on flex child not working -

this question has answer here:

• prevent child element overflowing parent in flexbox [duplicate] 1 answer
• why doesn't flex item shrink past content size? 1 answer
• ellipsis not working in flex container 1 answer
• flexbox, min-height , ie11 2 answers

i have container flex. want middle child take entire space set flex: 1. far good.

the next level middle child has 2 child want set flex (if lost me, skip snippet) , first child set ellipsis styles. now, ellipsis stops working.

if click on button, see short text;

any ideas?

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

add overflow: hidden; .wrapper .child2.

actually, mosh feu suggests in answer, min-width: 0 should work, , does, cross browser, though ie buggy , need overflow

the reason child2 need it, because flex item, , flex item's, in case min-width, defaults auto, , won't allow smaller content, adding overflow: hidden (or value visible), or min-width: 0, 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>

wiki