We all are good with flex boxes and all. Lets have a case when we have a box of width something say; 300px, now adding 3 div inside this such that the middle text can be very long. So for this we will be using ellipsis as text-overflow. So, taking all this in mind. Lets begin.

Lets first write the HTML code-

<div class="outerWrapper">
  <div class="first">
    Life of pie
  </div>
  <div class="secondthird">
  <div class="second">
    This is a very long text needs to have dot dot
  </div>
  <div class="third">
    Chevron
  </div>
   </div>
</div>

So, in this html view, we just created 3 divs with an outer wrapper and a secondthird div as the wrapper of the second and third div. Now, lets move on to the css part.

.outerWrapper{
  display: flex;
  width: 300px;
  border: 1px solid black;
  padding: 10px;
  justify-content: space-between;
}

.secondthird{
  display: flex;
  width: 60%;
}

.first{
  white-space: nowrap;
  margin-right: 8px;
}

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

.third{
  margin-left: 8px;
}

Some information: 
For creating the ellipsis effect using CSS. i.e. if content overflows then 3 dots appear. We have to use these 3 properties: 
1. white-space: no-wrap // which means the text dont    overflow to next line.
2. text-overflow: ellipsis // which means that the text overflow will results in 3 dots
3. overflow: hidden // which means that the overflowed text will be hidden.

For more clearity checkout my jsfiddle.

https://jsfiddle.net/djmayank/fkw5rcna/1/

https://jsfiddle.net/djmayank/fkw5rcna/1/