How to get Scrollbar for left side of the Image/Div after it is scaled at the center

I’m centering an image using display:flex & justify-content:center
and using some zoom buttons to scale the image when they’re clicked.

The issue is that I’m not able to get a scroll bar to go to the Left Side of the image after it is scaled.

I checked about the scaling property and learned that it scales the (0,0) coordinates and possibly I’m trying to go the negative coordinates (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()#scaling_the_x_and_y_dimensions_together)

Is there anything i can do to go to have full access of the image after it is being scaled? (by full access i mean to the left/right/top/bottom)
Here is the fiddle for reference : https://jsfiddle.net/r9sdhjyz/1/