Container element resizing breaks dragging behaviour until window resize when using percentage widths

[richard-ob]

I am using Packery with a layout that has a collapsible navigation side menu, which causes the content container to change size whenever the navigation is collapsed. If I collapse the navigation however, Packery appears to resize okay, however if you drag an element you can see that the underlying grid is displaced, and the elements try to fit into the previous size of the grid, not the current size. This is using percentage widths for the container and items (i.e. percentPosition: true).

The workaround I am using is to use a third party library to detect container size changes, however I am having to dispatch a window resize event for Packery/Outlayer to trigger the "proper" resize handling. If I call .resize() on a Packery instance manually, it doesn't solve the issue, I assume because Outlayer is where the logic resides, however I don't have direct access to the Outlayer instance.

Reduced test case below. To reproduce:

• Click Toggle container size
• Drag any element
• Resize window
• Drag any element

https://codepen.io/ohnorichard/pen/wvwogYP