Автоматическое переполнение не работает с justify-content: flex-end ⇐ CSS

[Anonymous]

Я пытаюсь добиться того, чтобы элементы были выровнены по правому краю, а все переполняющие элементы были скрыты, но доступны через полосу прокрутки.

Но похоже, что полоса прокрутки исчезает при указании justify-content: flex-end. Почему это и как это исправить?

Вот демо: https://jsfiddle.net/efguz4mp/1/

Код: Выделить всё

.row {
width: 100%;
max-width: 500px;
background: #DADADA;
display: flex;
overflow: auto;
justify-content: flex-end;
}

.box {
width: 200px;
height: 40px;
margin: 4px 10px;
background: red;
flex-shrink: 0;
}

Код: Выделить всё

...а вот демо без justify-content : flex-end;: https://jsfiddle.net/efguz4mp

Код: Выделить всё

.row {
width: 100%;
max-width: 500px;
background: #DADADA;
display: flex;
overflow: auto;
}

.box {
width: 200px;
height: 40px;
margin: 4px 10px;
background: red;
flex-shrink: 0;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/473 ... t-flex-end