item width breaks with text wrap

[proohit]

Describe the bug It appears the width calculation of each item breaks if the layout gives the masonry smaller available space, and gives it back afterwards. I've detected this with animations using framer-motion, see sandbox below. The masonry container appears to get the correct width. Also, triggering a rerender seems to fix the issue, but i don't know when to rerender in order to fix that.

To Reproduce Hover over the nav bar, in order for it to grow. Then hover away and the masonry stays in the shrunk state https://codesandbox.io/p/sandbox/frosty-framework-kfksfg

Expected behavior The layout should adapt to wrapped/unwrapped text and calculate the width accordingly.

Screenshots

Before: After:

[jaredLunde]

Seems like you may want this instead: https://codesandbox.io/p/sandbox/masonic-inside-of-a-scrollable-div-example-k9l6c?file=%2Fsrc%2Findex.js

Or control the width prop on your own as seen here https://github.com/jaredLunde/masonic?tab=readme-ov-file#masonryscroller

[proohit]

Thanks for your quick response. Unfortunately, I do not quite get what the proposed solutions are. I thought that the Masonry components use the remaining width automatically, as the masonry container width is set to "100%".

[jaredLunde]

The default component only updates if the size of the window changes

[jaredLunde]

The default component only updates if the size of the window changes