You’re encountering this issue because the boundaryMargin does not directly dictate the scaled dimensions of the content. Instead, it defines the amount of "wiggle room" allowed for panning when zoomed out. Let’s clarify how to calculate the correct boundary margin.

Key Points: Minimum Scale (0.5):

At 0.5 scale, the blue container's full width (400px) will scale down to 200px (matching the viewport width), and the height will scale to 100px. Boundary Margin:

The boundaryMargin allows panning beyond the visible viewport. For the height, when zoomed out to 0.5 scale, the top and bottom should allow for a combined 100px margin (to match the scaled height). To center this margin: Top/Bottom Boundary: 100 / 2

50 100/2=50. InteractiveViewer Behavior:

While the intuitive margin is 50px (half of the 100px scaled height), InteractiveViewer applies these margins relative to the unscaled dimensions of the child. To achieve the expected behavior, you need to double the calculated margin: Effective Top/Bottom Boundary: 50 × 2

100 50×2=100. Why Double the Margin? The InteractiveViewer's boundaryMargin creates additional space beyond the visible area on both sides of the axis. Setting it to 100px ensures there’s sufficient space for the full scaled height of the content (100px) to fit when zoomed out.