div换行时不收缩

Question

我正在尝试构建一个包含3个部分的标题栏布局：

1. 左：标题可能具有较长的文本，可以被截断
2. center：一个不应被截断但应换行的字幕
3. 右：固定部分（例如菜单按钮）

这基本上可以正常工作，但是居中的div不会像预期的那样缩小，从而浪费了一些空白（请参见红色矩形标记）：

这是完整的StackBlitz example

相关html：

<div fxLayout="row" fxLayoutAlign="start center">
    <mat-card fxFlex>
        <div fxLayout="row" fxLayoutAlign="space-between center">
            <div class="truncate-line">Long text can be truncated</div>
            <div fxFlex="nogrow" class="action-blurb">multiple lines</div>
            <div fxFlex="none" class="action-blurb">&nbsp;|&nbsp;</div>
        </div>
    </mat-card>
</div>

相关CSS：

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

由于nogrow与flex: 0 1 auto相同（即：grow = 0，shrink = 1，base = auto），因此我希望居中的div在需要时会收缩，但是不会't。
我想念什么？

Answer 1

经过数小时的研究，结果发现angular flex-layout存在很多问题，尤其是与弹性基础和最小/最大宽度有关：#748，#438，{ {3}}，#689，#737，#729

我的结论是根本不使用fxFlex，而是依靠CSS的flex属性。
使用纯CSS可以轻松完成我期望的操作：#884

Fixed Stackblitz example

中间项目的相关代码：

<div style="background-color: orange; flex: 1 1 70px; min-width: 60px">multiple lines</div>