I've set up my DIVs in a layout I desire. The horizontal scroll works as expected (left part fixed, right part scrollable). The issue I noticed is that the vertical scroll only affects the latter.
Here's a fiddle with the behavior
I need all the rows (both left and right part) to scroll vertically on overflow. At the same time, I need the right part to be scrollable horizontally.
I understand that the vertical scroll needs to be placed on a container holding both left and right containers. I've tried setting display: block and laborated with different settings for overflow (both x and y). After a few days, I've given up.
div.page { width: 600px; height: 300px; display: flex;}div.table { display: flex; flex-direction: column;}div.left { border: 3px solid blue; width: 300px; flex: 0 0 0;}div.right { border: 3px solid green; display: block; overflow-x: scroll; flex: 1 1 0;}div.header { border: 3px solid orange; flex-direction: row; flex: 1 1 0;}div.row { border: 3px solid pink; flex-direction: row; flex: 1 1 0;}