space-x-* and flex-wrap: they don't love each other

[frederikhors]

I'm opening this because

I want to try out the new space-x-* class to prevent using the margin or padding technique.
I also want to use the flex-wrap class to prevent columns going outside.

Sadly the result is not as I expected.

Example: https://codepen.io/buismaarten/pen/PoPRqdJ

Is there a way we can address this?

---

Related:

• The space-x-4 class doesn't working correctly with the flex-wrap class #1735
• The space-x-4 class not working correctly with the flex-wrap class #1734

[adamwathan]

Not solvable unfortunately, just a known limitation. Real solution will be when flexbox has full browser support for the gap property.

Previous discussion:

#1584 (comment)

[yannxaver]

After reading this issue, I looked up flexbox gap on caniuse and it seems like browser support is at 95% now. https://caniuse.com/flexbox-gap So anyone reading this who doesn't target Internet Explorer 11, should be good to go and can use gap-x-* instead.