Snappy effect when `gap` is used in flexbox, instead of `margin-right` on children elements.

[smitbarmase]

Expected behavior

When used gap, with flex it should work properly and similar to margin-right property.

Actual behavior

It actually creates the snappy effect.

Steps to reproduce

Add gap property in the parent div and make it flexbox. Remove margin-right or another margin from children.

Suggested solution?

No idea.

What version of React are you using?

17.0.1

What version of react-beautiful-dnd are you running?

13.0.0

What browser are you using?

Microsoft Edge

Demo

[Macroz]

I have this same problem (Chrome, container with flex that introduces gap between elements). The droppable will interpolate to an incorrect position and then snap back to the correct one once the animation ends.

[danieldelcore]

Hi folks,

Unfortunately RBD does not currently take flex gap into consideration when calculating positions of draggables. AFAIK it's only width,border, padding & margin that is measured. If you inspect this basic example you can see how the draggables use margin-bottom to create a space between each other.

I'm not entirely across what it will take to add support for flex gap, but i'd suspect that it wouldn't be too hard to do.
Definitely be open to adding it if you're interested in raising a PR.

[shi-rudo]

does someone have a workaround for supporting gap?

[arthurmatthew]

I'm unfortunately having this issue too, but luckily it isn't hard to use margin instead, especially with CSS child selectors