css - 带有 div 的 flex 框中的底部位置

Question

我正在尝试将带有进度条的 div 放置在我的 flexbox 的底部，但是我在 stackoverflow 上找到的所有内容都不起作用或未按需要应用...

尝试了absolute to the bottom、auto-margin、flex-grow，但都没有解决问题！

  <div class="row statut-plan-action">
    <div class="col" *ngFor="let statut of details.statuts">
      <div>{{statut.descriptionCourte}}</div>
      <div class="fill-space">
        <app-etape-plan-action-statut [etape]="obtenirEtape(statut.code)" [descriptionStatut]="statut.descriptionCourte"></app-etape-plan-action-statut>
      </div>


      <ngb-progressbar class="progression" type="success" [value]="obtenirPourcentageCompletion()"></ngb-progressbar>
    </div>
  </div>

所以我试图将 ngb-progressbar 放在我的 div 的底部，但我没有成功。我试过把它放在一个div中，它也没有用

这是我在 css 中所做的最后一次尝试

.statut-plan-action {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}

.col {
  padding-left: 0;
  padding-right: 0;
}

.fill-space {
  flex-grow: 1;
}

.progression {
  margin-top: auto;
}

* 编辑 *

问题的图像