Children in an horizontally overflowing flexbox container don't have the same width

Question

Here is a Pen

When you shrink the page at 360px width, all the .snail-step items (flex children) have different width.

I want them all to have the same width. How can this be achieved?

I am using flexbox and make the oferflow of the parent container overflowable. Also all the children have flex 1 0 0, which should thell to grow and not shrink, and to share the same size.

HTML

<div class="snail-bar">
<div class="snail-steps">
    <!-- ngRepeat: step in vm.steps --><div ng-repeat="step in vm.steps" class="snail-step ng-scope passed" ng-class="{ 'passed': (step.id <= vm.currentStepId)}">

        <div class="title ng-binding">First step</div>
        <div class="step-checkpoint">
            <div class="checkpoint"></div>
        </div>
    </div><!-- end ngRepeat: step in vm.steps --><div ng-repeat="step in vm.steps" class="snail-step ng-scope passed" ng-class="{ 'passed': (step.id <= vm.currentStepId)}" style="">

        <div class="title ng-binding">Second step</div>
        <div class="step-checkpoint">
            <div class="checkpoint"></div>
        </div>
    </div><!-- end ngRepeat: step in vm.steps --><div ng-repeat="step in vm.steps" class="snail-step ng-scope passed" ng-class="{ 'passed': (step.id <= vm.currentStepId)}" style="">

        <div class="title ng-binding">Third step</div>
        <div class="step-checkpoint">
            <div class="checkpoint"></div>
        </div>
    </div><!-- end ngRepeat: step in vm.steps --><div ng-repeat="step in vm.steps" class="snail-step ng-scope passed" ng-class="{ 'passed': (step.id <= vm.currentStepId)}" style="">

        <div class="title ng-binding">Fourth step</div>
        <div class="step-checkpoint">
            <div class="checkpoint"></div>
        </div>
    </div><!-- end ngRepeat: step in vm.steps --><div ng-repeat="step in vm.steps" class="snail-step ng-scope passed" ng-class="{ 'passed': (step.id <= vm.currentStepId)}" style="">

        <div class="title ng-binding">Fifth step</div>
        <div class="step-checkpoint">
            <div class="checkpoint"></div>
        </div>
    </div><!-- end ngRepeat: step in vm.steps -->
</div>
<div class="snail-progress-bar" ng-style="{ left: vm.checkpointOffsetPercent + '%', right: vm.checkpointOffsetPercent + '%'}" style="left: 10%; right: 10%;">
    <div class="snail-current-progress" ng-style="{width: vm.currentProgressPercent + '' + '%'}" style="width: 100%;"></div>
</div>

CSS

.snail-bar {
    color: #253239;
    position: relative;
    overflow-x: scroll;
}

.snail-steps {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    position: relative;
}

.snail-step {
    flex: 1 0 0;
    text-align: center;
}

.title {
    white-space: nowrap;
}

.step-checkpoint {
   text-align: center; 
}

.checkpoint {
    margin-top: 5px;
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 94.1px;
    background-color: #dadada;
    border: 5px solid #dadada;
}

.passed .checkpoint {
    background: #253239;
}

.snail-progress-bar{
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #dadada;;
}

.snail-current-progress {
    height: 2px;
    background: #253239;
    transition: width 1s;
    width: 0;
}