How to spread elements with flex to take up the same width in a parent container - css

Question

My codepen
What I want to achieve:
I want that the elements within the process-indicator parent take up the same width except the elements with class=step AND that the divs with steps name are directly under the step element.
The process-indicator stretch 100% and the connector classes should not use fixed pixel widths so I can add 5,6 or 10 steps and it scales graphically well.
What does not work:
1.) The first after-connector and last before-connector elements in yellow do not share the same size as the elements in green/black
2.) The step names in the divs should be positioned under the according step bubble and not inline with the steps and connectors.
Be aware that I do NOT want to use the before/after pseudo selectors for the step element! =>
I need to be able to later apply dynamically a complete/incomplete class with react thus I need full control about every connector.
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);
}
}
}
UPDATE

Answer 1

I would go with a flex solution on the container and move the seperators outside so they can grow equally:
.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>
Please note you will need to add margin bottom to the container to prevent any content below being overlapped by the text