Horizontal Overflow With Flexbox CSS
Being a web-developer is full of unexpected challenges.
Yay.
I just wanted to create a horizontal images container for my gallery component, and be done with it.
So I came up with a basic layout:
Neat.
But… Alas!
The right padding of the container is absent!
It seems like something went awry when the container expanded.
Scouring the internet (+the spec) hasn’t given me an answer as to why that happens.
It has given me workarounds, though:
1. Use ::after pseudo element
Since it doesn’t look like the container’s end-side padding (in LTR direction that is the right padding) is taken into consideration, we can add a pseudo element with the same padding value wanted, and we’ll get our right padding.
2. Use a wrapper div
Another workaround is to wrap our container with another div, which will be used as the scrollable container.
We’ll switch our flex-container's padding with margin, and also give it a display: inline-flex so the flex-container will grow by its content.
NOTE:
This solution might be less effective than using the ::after pseudo element since hover event does not apply on margin, so you’ll lost that area in the flex-container.
Conclusion
I gave you 2 options to work this issue around.
I like the first more than the last since you don’t lose any padding advantages. It would oblige you to keep the flex-container and the ::after padding synced, but that would be a small price to pay (and with preprocessors such as LESS and SASS, you could assign the value to a variable).
REQUEST:
If you do understand why this happens, and can point me to the source it would be a great help as 2 days of searching have not given me a satisfying answer — and could be shared here.
