justify-content and overflow-x-scroll / horizontal scrolling

[tzeller]

it seems to be impossible to have a centered horizontal flexbox with an overflow e.g.:

< div class="flex flex-no-wrap overflow-x-scroll scrolling-touch justify-center">
< div class="w-1/4">element a< /div>
< div class="w-1/4">element b< /div>
< div class="w-1/4">element c< /div>
< div class="w-1/4">element d< /div>
< div class="w-1/4">element e< /div>
< div class="w-1/4">element f< /div>
< /div>

should actually show element b-e centered with the possibility to scroll to the left (to see element a or right to see element f

only works for the element f - the element a is somehow not reachable

[adamwathan]

This isn't really a Tailwind problem, you'd get the same results if you just wrote the CSS by hand. Moving to discussions though in case anyone has any ideas on a solution for you 👍

[tzeller]

wow speedy thanks

[c00kiemon5ter]

I am also having this issue and looking for a way to solve this. Have you found any solution?

[c00kiemon5ter]

There is a suggestion on SO to use pseudo-elements before and after to push the content in the center instead of using justify-center.