Как распределить элементы с помощью flex, чтобы они занимали одинаковую ширину в родительском контейнере

Question

Моя кодовая ручка

Чего я хочу достичь:

Я хочу, чтобы элементы в родительском индикаторе процесса занимали одно и то жеwidth, за исключением элементов с class = step AND, которые div с именем steps находятся непосредственно под элементом step.

Индикатор процесса растягивается на 100%, и классы соединителя не должны использовать фиксированную ширину в пикселях, поэтому я могу добавить 5, 6 или 10 шагов, и он хорошо масштабируется графически.

Что не работает:

1.) Первый после-разъем и последние элементы до-разъема желтым цветомне используйте тот же размер, что и элементы зеленого / черного цвета

2.) Имена шагов в элементах div должны располагаться под соответствующим пузырем шагов, а не в соответствии с шагами и соединителями.

---

Помните, что я НЕ хочу использовать псевдоселекторы до / после для элемента шага!=>

Мне нужно позже иметь возможность динамически применять полный / неполный класс с реагированием, поэтому мне нужен полный контроль над каждым соединителем.

HTML

<ul class="process-indicator">
  <li class="completed">
    <span class="step"></span>
    <span class="after-connector"></span>
    <div>step 1</div>
  </li>
  <li class="incompleted">
    <span class="before-connector"></span>
    <span class="step"></span>
     <span class="after-connector"></span>
    <div>step 2</div>
  </li>
  <li class="incompleted">
    <span class="before-connector"></span>
    <span class="step"></span>    
    <span class="after-connector"></span>
    <div>step 3</div>
  </li>
  <li class="incompleted">
    <span class="before-connector"></span>
    <span class="step"></span>    
    <div>step 4</div>
  </li>
</ul>

SCSS

  $incomplete: gray;
$complete: blue;
$step-size: 40px;
$step-line-thickness: 2px;
$border-thickness: 1px;
$darken-amount: 30%;

@mixin step-style($color) {
  background-color: $color;
  color: $color;
  border-color: darken($color, $darken-amount);

  &:before,
  &:after {
    background-color: $color;
    border-color: darken($color, $darken-amount);
  }
}

.flex {
  -ms-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  flex: 1;
}

.displayFlex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.process-indicator {
  background: orange;
  @extend .displayFlex;
  margin: 0;
  padding: 0;
  margin-bottom: 1em;

  > li {
    @extend .displayFlex;
    @extend .flex;

    list-style: none;
    font-size: 1.2em;
    position: relative;
    text-overflow: ellipsis;
    color: $incomplete;
  }

  > li .before-connector,
  li .after-connector {
    @extend .flex;

    position: relative;
    text-overflow: ellipsis;
    color: $incomplete;
  }

  > li .step {
    width: $step-size;
    height: $step-size;
    background-color: $incomplete;
    border-radius: 40px;
  }
  // line connectors
  > li .after-connector {
    height: 3px;
    top: $step-size / 2;
    background-color: green;
  }
  > li .before-connector {
    height: 3px;
    top: $step-size / 2;
    background-color: red;
  }
  > li:first-child span.after-connector,
  > li:last-child span.before-connector {
    background: yellow;
  }
  // completed state
  > li.completed {
    color: $complete;
    .step {
      @include step-style($complete);
    }
  }

  > li.incompleted {
    color: $incomplete;
    .step {
      @include step-style($incomplete);
    }
  }
}

ОБНОВЛЕНИЕ

Answer 1

Я бы пошел с гибким решением на контейнер и переместил бы сепараторы наружу, чтобы они могли расти одинаково:

.container {
  display: flex;
  width: 100%;
  background: orange;
}

.step {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  background: grey;
}

.text {
  font-weight:bold;
  font-size:20px;
  position: absolute;
  top: 100%;
  margin-top: 10px;
  left: 0;
  white-space: nowrap;
}
.step:last-child .text {
  right:0;
  left:auto;
}
.seperator {
  flex-grow: 1;
  position: relative;
}

.seperator:before {
  content: '';
  display: block;
  height: 10px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.yellow:before {
  background: yellow;
}

.green:before {
  background: green;
}

.red:before {
  background: red;
}

<div class="container">
  <div class="step">
    <span class="text">Step 1</span>
  </div>
  <div class="seperator yellow"></div>
  <div class="seperator red"></div>
  <div class="step">
    <span class="text">Step 2</span>
  </div>
  <div class="seperator green"></div>
  <div class="seperator red"></div>
  <div class="step">
    <span class="text">Step 3</span>
  </div>
  <div class="seperator green"></div>
  <div class="seperator yellow"></div>
  <div class="step">
    <span class="text">Step 4</span>
  </div>
</div>

Обратите внимание, что вам нужно будет добавить поле отступа в контейнер, чтобы предотвратить наложение содержимого ниже текста