css transform scroll,CSS Transform Translate: Can't scroll into translated area

I've got a viewport fixed in size (blue rectangle in illustration). Within this viewport I've got my content. Whenever the content is greater in size than the surrounding viewport, I want to be able to scroll. This so far works just fine.

The problem I'm experiencing comes into play as soon as I transform my content. Let's say I want to scale and translate it in order to show a certain area in higher detail.

After this transformation I still want to be able to reach every corner of my content with the scrollbars of the viewport (green in illustration). But I can only croll right and down. Everything above and left of my translation can't be reached with the scrollbars.

Is this just how things are, or am I missing something? Is there a good solution to this?