Bug: overlapping div "tables" when resizing with display:flex

I've been able to make some progress re-doing tables so that they aren't using html tables and are instead a combination of &lt;div&gt;'s, css grid, and flex. However, I've run into this problem when I resize the window: I've been checking my styles for any compatibility issues and trying to troubleshoot, but I've been at it long enough thought it could be a good time to ask for help. Especially since I'm still learning and I'm not sure where to look for the issue.&nbsp; Here's the Github. The file in question is the one labelled 'DODASFlexWrap'. <a href="https://github.com/danimagaming/ForgeofSteelRoll20beta" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta</a> Thanks!

So far some changes have happened when I adjust the 'height' property in the css for the weapon table. But haven't figured it out yet.

I may have solved this issue but replaced it with another which I can always put another post about. If anyone knows what kind of things normally cause this it would still be very helpful. I'm still not sure what I'm doing just trying everything. I removed display:grid &nbsp;from the parent container that held all the div's for the weapon table and somehow that fixed it. But I have no idea why. I thought display:grid &nbsp;could have subordinates/children or whatever it's called without causing issues. Now the problem is that the +add and +modify buttons seem to make the effective container height for the weapon table much larger automatically. So I can't size it appropriately. Anywho probably need a separate post for that.