div 换行时不收缩

Question

我正在尝试构建一个包含 3 个部分的 title-bar 布局：

左：标题可能有可以截断的长文本
center: sub-title 不应被截断而是换行
右：固定部分（例如菜单按钮）

这基本上可以了，但是居中的div并没有像预期的那样收缩，所以它浪费了一些white-space（见红色矩形标记）：

相关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 会缩小需要时，但不需要。
我错过了什么？

Answer 1

经过数小时令人沮丧的研究后发现 angular flex-layout has lots of issues, especially related to the flex-basis and min/max-width: #748, #438, #689, #737, #729, #884

我的结论是根本不使用 fxFlex，而是依赖 css 弹性属性。
使用纯 css 可以轻松实现我的预期：Fixed Stackblitz example

中间项相关代码：

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

div 换行时不收缩

div does not shrink when it wraps the text

flexbox

angular-flex-layout