Flexbox container with overflow: scroll won't render the entire viewport

Question

I'm using a flexbox container (fixed width of 400px) with few <spans> inside, the last <span> has a big right margin, but the scrollbar won't allow to show it, instead it stops at the end of the border of this last <span> element and completely ignores the margin: right property.

Every container has a 1px padding to prevent collapsing margins but the problem persists

Here's the code and an example codepen:

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

Example pen:

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