CSS flex box не может правильно установить ширину второго элемента flex (angular7)

Question

В приложении angular7 я пытаюсь получить правильную ширину для гистограммы.

Свойство .bar width имеет vw единицу.Проблема в том, что он основан на родительской ширине ( .bar-container ), и я хочу, чтобы он основывался на зарезервированной ширине элемента flex-box.

Как это можно исправить, не выходя из окна?

HTML-фрагмент:

<div class="bar-container" >
  <div class="element">some element</div>
  <div class="bar" [style.background-color]="randomColor" 
  [style.width]="maxValue" [style.border]="borderColor">
</div>

CSS-фрагмент:

.bar-container {
  width: 80vw;
  margin-bottom: 10px;
  display: flex;
}
.bar {
  font-size: 1em;
  box-shadow: 5px 5px 15px 5px #ffccc9;
}
.element {
  flex: 0 0 auto;
  padding-right: 5px;
}

здесь простое приложение для воспроизведения возникшей у меня проблемы на @ Stackblitz

EDIT : для лучшего понимания на рисунке ниже, из первого ряда вПоследнее у нас есть ширина: 100%, 70%, 50%, 20%.Если бы он основывался на зарезервированной ширине элемента flex-box, у нас был бы хороший размер, но я не знаю, возможно ли это?