Display: Flex loses right padding when overflowing?
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>There is another way: You can have another DIV item-flex -> TEXT_11, then set MarginLeft = PaddingRight, you want
<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 style="margin-left: 5px" class="TEXT_11"> </div>
</div>
Both solutions from Arthur Käpp and dholbert are working. However, if you choose to use any 'align-items' (accept for stretch) in the main flex box it will break again. It took me a while but eventually I cooked up a solution which works fine.
This solution is using the pseudo elements:
.outer {
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border:1px #ccc solid;
overflow-x: auto;
padding: 5px;
align-items: center;
position: relative;
}
.outer > div {
flex: 1 1 auto;
border: 1px #ccc solid;
text-align: center;
min-width: 50px;
margin: 5px;
}
.outer > div:last-child::after {
content: '';
position: absolute;
height: 100%;
width: 10px;
display: inline-block;
margin-left: 10px;
}<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>Be aware that in some cases the margin-left: 10px in the psuedo-element does not work. You can use a right: -10px which would also work.
Alternatively it's possible to create the margins with pseudo-elements:
.outer::before { content: ''; min-width: 5px; }
.outer::after { content: ''; min-width: 5px; }
.outer {
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border:1px #ccc solid;
overflow-x: auto;
padding: 5px;
}
.outer::after { content: ''; min-width: 5px; }
.outer > div {
flex: 1 1 auto;
border: 1px #ccc solid;
text-align: center;
min-width: 50px;
margin: 5px;
}<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>