css only solution for scaling + overflow

I want to show a html of undefined width and height at a scale of 0.5 in a scrollable pane.

So I style the container this way

.container {
 position:absolute;
 top:40px;
 left:40px;
 bottom:40px;
 right:40px; 
 overflow:scroll;
}

and the content

.content {
 transform:scale(0.5);
 transform-origin: top left;
}

The problem is that the scale factor only change the visual aspect of the block, it didn't affect its inner container. If the content was 1000 x 2000, at 0.5 scale the visible area is 500 x 1000 but its "implicit" container is still 1000 x 2000.

So if i put it in a parent container with overflow:scroll then the scroll bar start to show empty content as soon as you pass 50%

What is the solution ? Preferably in css. Or javascript if this is not possible in pure css.

.content {
 transform:scale(0.5);
 transform-origin: top left;
}

.container {
 position:absolute;
 top:40px;
 left:40px;
 bottom:40px;
 right:40px; 
 overflow:scroll;
}

/* css behind does not matter */
span
{
 display:block;
 width:400px;
 height:400px;
 background-color:red;
 border:1px solid green;
}
span:nth-child(2n)
{
 height:300px;
 background-color:yellow;
}

<html>
<body>

<div class="container">
	<div class="content">

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>	
    ...when zoomed there are empty space here under ...
    
	</div>
</div>

</body>
</html>

Solution

Just set height:0 to .content:

.content {
 transform:scale(0.5);
 transform-origin: top left;
 height: 0;
}

.container {
 position:absolute;
 top:40px;
 left:40px;
 bottom:40px;
 right:40px; 
 overflow:scroll;
}

/* css behind does not matter */
span
{
 display:block;
 width:400px;
 height:400px;
 background-color:pink;
 border:1px solid green;
}
span:nth-child(2n)
{
 height:300px;
 background-color:gold;
}

<html>
<body>

<div class="container">
	<div class="content">

    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>	
    ...when zoomed there are empty space here under ...
    
	</div>
</div>

</body>
</html>