水平溢出的弹性箱容器中的儿童不具有相同的宽度

Question

这是{{3}}

当您以360px宽度缩小页面时，所有.snail-steps项（flex children）都有不同的宽度。

我希望他们都有相同的宽度。如何实现这一目标？

我正在使用flexbox并使父容器的流量溢出。 此外，所有的孩子都有flex 1 0 0，这应该是增长而不是缩小，并且共享相同的大小。

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;
}