带有溢出的Flexbox容器：滚动不会渲染整个视口

Question

我正在使用一个内部只有少量<spans>的flexbox容器（固定宽度为400px），最后一个<span>的右边距很大，但是滚动条不允许显示它它停在最后一个<span>元素的边界末端，并完全忽略margin：right属性。

每个容器都有1px的填充，以防止边距塌陷，但问题仍然存在

这是代码和示例代码笔：

.html

<div class="controls_container">
    <div class="btn1">
    </div>
    <div class="slider_container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="btn2">
    </div>
</div>

.css

.controls_container {
width: 400px;
margin: auto;

display: flex;
transition: opacity .2s;
padding: 1px;
}

.btn1, .btn2 {
    flex: 0 0 10%;
    background: #aaa;
    transition: background .2s;

    display: flex;
    justify-content: center;
    align-items: center;
}

.slider_container {
    flex: 0 0 80%;
    overflow-x: scroll;

    display: flex;
    align-items: center;

    padding: 1px;
}

    .slider_container div {
        flex: 0 0 5.5em;
        margin: 0.35em;
        height: 5.5em;
        background: #7d7d7d;
        display: block;
    }

    .slider_container div:last-child {
        margin: 0.35em 5.35em 0.35em 0.35em;
    }

示例笔：

https://codepen.io/anon/pen/GYrJvO