div在包裹文本时不会缩小答案

【问题标题】：div does not shrink when it wraps the textdiv在包裹文本时不会缩小
【发布时间】：2019-07-11 14:17:16
【问题描述】：

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

左：可能包含可截断的长文本的标题
center：不应截断但换行的子标题
右：固定部分（例如，用于菜单按钮）

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

相关 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 在需要时会缩小，但事实并非如此。我错过了什么？

【问题讨论】：

标签： flexbox angular-flex-layout

【解决方案1】：

经过一些令人沮丧的研究，发现angular flex-layout 有很多问题，尤其是与 flex-basis 和 min/max-width 相关：#748、#438、#689、#737 , #729, #884

我的结论是根本不使用 fxFlex，而是依赖 css flex 属性。
使用纯 css 很容易做到我所期望的：Fixed Stackblitz example

中间项的相关代码：

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

【讨论】：