So i have come up with a UI design for a dashboard, that is constructed like the following:
the dashboard has a scroll activated depending on the the total height of the added boxes, the issue here is that these boxes are resizable therefore the these boxes also have scrolls (depending on the content). So sometimes when the users intended to scroll the down to see the boxes in the dashboard, they scrolling down within the content boxes instead. Currently there are 20px margin between the boxes, but it still seems to be annoying for the user to try to target these spaces when wanting to scroll within the dashboard.
So pretty much, it results in shitty experience. Not sure how if there any best practices for handling these situations for the dashboard, but any tips or links to other pages that have solved this issue are appreciated.
To visualize the idea, what i am trying to achieve is something like https://tweetdeck.twitter.com but the boxes are stacked vertically instead of horizontally.
The reason i am not going with the horizontal design, is because horizontal scrolling does not come naturally and also its easier to scan content vertically. I like the horizontal design on the mobiles, but not that much on the desktop devices... I am open to any solutions.
EDIT2: I was thinking to let the user hold shift button while scrolling to make sure its the parent scrollbar that scrolls (I would add it as a pro tip somewhere visible for the user). as for mobile, i would apply the horizontal design, what do you guys think?