Overflow Behavior in CSS

I'm building an app for running tournament brackets which, by their nature are often large hard to break up so my app requires a decent amount of overflow handling. I am struggling to understand how to get overflow to work in many cases though, particularly when padding is involved. For instance here is a bit of my UI for adding players (see image) The parent clearly has padding on bottom, but the scroll refuses to take this into account. I've seen this change based on seemingly random things like the flex-direction. Is there a good guide or some rules that explains all this?