I'm trying to get an element to have items aligned to the right, and all overflowing elements to be hidden but accessed by scrollbar.
But it seems like the scrollbar disappears when specifying justify-content: flex-end. Why is that, and how do I fix it?
Here is demo: 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;}<div class="row"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>...and here is demo without 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;}<div class="row"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>