Truncating text into ellipsis in a fluid div inside table-cell

I have a 3 column fix left and right layout, with middle layout as fluid as below. It works perfectly as currently. However, if i add a truncate class to it, the middle div width will expand over the parent width.

So, my question is: How to truncate text in fluid layout and fix the truncated text inside the fluid layout width. Do note that I do not expect to hard code the middle div width.

Plunkr before adding truncate class: Click here

If replace div class=middle into this, it will fail to truncate text.

<div class="middle">
        <div class="truncate">This is a very long text that should be truncate</div>
        <div class="truncate">This is a verry very long text that should be truncated</div>
      </div>

Sample expected: