来自foreach循环的结果不会滚动但会中断

Question

我有一个显示火车的页面（Css制造），它需要定位轴。

当车轴没有余量时，我有什么：

这就是我添加保证金时的样子。 （样式为SUM。因此总计算为％。）

正如您所见，圆圈（轴）正在下降。我不想要这个。我希望圆圈向右移动。像这样：

所以，如果圆圈向左边走。这是图2中的情况。我希望边框有一个滚动条。现在我有这个，但它不起作用。 代码：

编辑： 制作一个片段并删除其他代码

#axle_bogie_border {
    border-radius: 0px 0px 20px 20px;
    background: lightgray;
    border: 2px solid black;
    width: 100%;
    height: 400px;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
}

#length_info {
    border: 2px solid black;
    border-bottom: none;
    background: green;
    text-align: center;
    border-radius: 20px 20px 0px 0px;
    width: 100%;
}

#show_length{
    border-bottom: 2px solid red;
    width: 100%;
}

#show_length2{
    border-bottom: 2px solid red;
    width: 10%;
}

#train {
    margin-top: 2%;
    border-radius: 20px;
    height:200px;
    background:black;
    vertical-align: middle;
    margin-left: 10%;
}

#train h2 {
    color: white;
    text-align: center;
}

#axles { 
    margin-left: 10%;
    position: relative;
    height: 50px;
}

#axle {
    float: left;
    text-align: center;
}

#circle {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: black;
}

<div id="length_info">
    <div id="show_length">25m</div>
    <div id="show_length2">2.5m</div>
</div>
<div id="axle_bogie_border">
    <div id="train" style="width:48%;">
        <h2>Train</h2>
    </div>
    <div id="axles">
        <div id="axle" style="margin-left: 20%">
            <div id="circle">1</div>
        </div>
        <div id="axle" style="margin-left: 20%">
            <div id="circle">2</div>
        </div>
        <div id="axle" style="margin-left: 20%">
            <div id="circle">2</div>
        </div>
        <div id="axle" style="margin-left: 20%">
            <div id="circle">2</div>
        </div>
    </div>
</div>

还做了一个小提琴：http://jsfiddle.net/3b63f4o1/