La division ne rétrécit pas lorsqu'elle enveloppe le texte.

Question

J'essaie de créer une mise en page avec barre de titre qui comporte trois parties :

1. à gauche : un titre qui peut contenir un texte long pouvant être tronqué
2. center : un sous-titre qui ne doit pas être tronqué mais placé sur une nouvelle ligne.
3. droite : une partie fixe (par exemple, pour un bouton de menu)

Cela fonctionne, mais la division centrée ne se rétrécit pas comme prévu, de sorte qu'elle gaspille de l'espace blanc (voir le rectangle rouge) :

Voici l'intégralité Exemple de StackBlitz

HTML pertinent :

<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 connexes :

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

Depuis nogrow est la même chose que flex: 0 1 auto (qui est : grow=0, shrink=1, base=auto), je m'attendrais à ce que la div centrée se rétrécisse lorsque cela est nécessaire, mais ce n'est pas le cas.
Qu'est-ce que je rate ?