Display: Flex loses right padding when overflowing?

Question

I have a problem with CSS3 flexbox.

If I set the flexbox element to overflow and set the min-width value for the child elements, will the correct padding of the parent element be lost? This is consistent across all supporting browsers.

Here is an example error. If you scroll to the right of the container, you will see that the last child is strongly against the right edge of the container instead of reading the value of the add-on.

 .outer { display: flex; flex-direction: row; width: 300px; height: 80px; border:1px #ccc solid; overflow-x: auto; padding: 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> 

Does anyone know why this is so and how I will correct it? I have successfully ruined the padding and margin values ​​in different combinations.

Answer 1

You need to add another wrapper layer if you want to have "overflow-x: auto" with a scrollable padding at the end.

Something like that:

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

Answer 2

Alternatively, you can create fields 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> 

Answer 3

Both solutions from Arthur Kepp and Dholbert work. However, if you decide to use some kind of 'align-items'' (accept for stretch) in the main flex box, it will break again. It took me some time, but in the end I prepared a solution that worked fine.

This solution uses 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> 

Keep in mind that in some cases the margin-left: 10px field in the pseudo-element does not work. You can use the right: -10px, which will also work.