You need to add another layer of wrapping, if you want to have both “overflow-x:auto” with scrollable padding at the end.
Something like this:
.scroll {
overflow-x: auto;
width: 300px;
border:1px #ccc solid;
}
.outer {
display: flex;
flex-direction: row;
box-sizing: border-box;
min-width: 100%;
height: 80px;
padding: 5px;
float: left; /* To size to content, & not be clamped to available width. (Vendor-prefixed intrinsic sizing keywords for "width" should work here, too.) */
}
.outer > div {
flex: 1 1 auto;
border: 1px #ccc solid;
text-align: center;
min-width: 50px;
margin: 5px;
}<div class="scroll">
<div class="outer">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
<div>text7</div>
<div>text8</div>
<div>text9</div>
<div>text10</div>
</div>
</div>