How to shorten text with ellipsis and Angular-FlexLayout?

I have a flex row which contains three flex rows. In the second one i have a title which shouldn´t be shortn and a text which should be. Also the first and last row shouldn´t shrink and should also have a fixed width.

I have already tried a lot of different combinations of flex. See attempt below:

<div fxFlexLayout="row">
  <div fxFlex="0 0 100px" fxFlexLayout="row">...</div>
  <div fxFlexLayout="row">
    <div>Title:</div>
    <div fxFlexLayout="row" class="truncate">
      This is a very long text which should be truncated!
    </div>
  </div>
  <div fxFlex="0 0 100px" fxFlexLayout="row">...</div>
</div>

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