Cross-browser height 100% on transform scale <1

问题

I can't seem to find a way to make the height of the child container to be 100% of the parent and just see scrollbars. Instead we see double the amount of white space for the height.

This question is related to Javascript zoom in/out to mouse x/y coordinates

If we don't have overflow set in the main container then in

• Chrome works
• Safari = works, but we don't have an x-axis scrollbar
• Firefox = white space issue

If we set overflow: auto or scroll then in

• Chrome = white space issue
• Safari = we have the scrollbar, but still the white space issue
• Firefox = white space issue

We need the overflow property to make safari show the scrollbars, which add the white space issue on all browsers.

JSfiddle link - https://jsfiddle.net/catalinu/jLfrbzwp/4/

body {
  margin: 0;
}

.main {
	width: 100%; /* percentage fixes the X axis white space */
	height: 100vh; /* i would love to use 100% but it doesn't work for height */
	overflow: scroll; /* needed for safari to show the x axis scrollbar */
}

.main .section {
	width: 2000px;
	height: 2000px;
	background-color: #333;
	transform-origin: 0 0;
  transform: scale(0.5, 0.5);
}

<main class="main">
  <section class="section"></section>
</main>

来源：https://stackoverflow.com/questions/57373062/cross-browser-height-100-on-transform-scale-1