javascript - Draggable div given 100% of parent when dragged with React-Beautiful-DND

Question

I'm using react-beautiful-dnd to create a simple allocations screen for some adjudicators to a competition room. Unfortunately, my setup has left me with two problems that I've been unable to resolve.

1. When dragging a 'Draggable' div it's given a width = 100% of its parent (Droppable) which causes horrible transforms to be given to the elements in the destination Droppables.

2. Now, when I add a second Draggable to a given Droppable instead of it being a horizontal allocation as the transforms and such suggest the elements end up stacked together and underneath other Droppable elements.

I've tried looking for other transforms in parents, and the only way that I've found to patch issue 1 is to set a fixed width on the Droppable but something feels as though this is poor practice (no examples I've found show this being necessary).

As additional context to #1 - I've looked at the style being given by DraggableProps which shows that the transforms and the width themselves are both set as a fixed width = the width of the Droppable parent.

I'd appreciate even just some direction for debugging since I realise that searching an entire codebase like this is far above and beyond the norm to be expected.

Image of Issue #1 - the horrifying width given for transforms Image of Issue #2 - the stacked elements

Full source, because I suspect it is relating to some bad choice of parent up the food chain: https://github.com/SteRoy/Tabbi3/tree/master/frontend/src/Tournament/AllocationPage

Answer 1

The resolution was that flex display was missing from the Droppable and giving Draggable a fixed width essentially resolved the width problem - a bit of padding to tidy up (and you can see the full resolution in a dedicated commit above).