flex item of dynamic width overflow flex container

Question

see this code example [ https://codepen.io/him10meena/pen/xxwYRxo][1]

//html
    <div class="row">
      <div class="div1">fixLengthText</div>
      <div class="div2">this text is dynamic and can be very very very very very very very long</div>
      <div class="div3">fixLengthText</div>
    </div>

     <p>
      i want the middle div to be contained inside the parent div with overflow ...
    </p>


//css
/* important stuff for this example */


.row {
  width: 500px;
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.div1,.div2,.div3 {
  flex: 0 0 auto;

}


/* other stuff */
div {
  padding:1em;
  margin:0.2em;
  background-color: rgba(0,0,0,0.125)
}

my 1st and last column have constant length string which is static, but my middle div can have any any length string and its overflows the parent flex container shown in example link

so i want to have it width equal to its content and as soon as the content start growing more than its capacity it should show it will ellipsis ie. ...

i want the content of all 3 divs in one line only without any wrapping. i would prefer solution without setting the max-width or explicit width on the div2(since my whole div width is based on device resolution here i have give it fixed value in link for example purpose only). just curious if there is any fix in flex for this

Answer 1

You simply need to allow the shrink for the second div then add the common properties for the ellipsis overflow:

 .row { width: 500px; display: flex; flex-direction: row; flex-wrap: nowrap; }.div1, .div2, .div3 { flex: 0 0 auto; } /* other stuff */ div { padding: 1em; margin: 0.2em; background-color: rgba(0, 0, 0, 0.125) }.div2 { flex-shrink:1; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

 <div class="row"> <div class="div1">fixLengthText</div> <div class="div2">this text is dynamic and can be very very very very very very very long</div> <div class="div3">fixLengthText</div> </div> <p> i want the middle div to be contained inside the parent div with overflow... </p>