When scrolling, both lists scroll at the same time, regardless of which list the dragging starts on. I would expect the two lists to be independent when it comes to scrolling. What am I missing and how to achieve my goal?

A simple explanation is that by default, the scrolling element is the page content. By using overflow in the lists or columns you’ll allow them to scroll independently. ons-col and ons-row already use flexbox but you might need to add some custom properties.