I am working on a flex row setup that includes three nested flex rows. Within the second row, I need to display a title that should not be shortened, and a text that should be truncated. Additionally, the first and last row must maintain a fixed width without shrinking.
I have experimented with various combinations of flex properties. Here is one attempt:
<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;
}