Просто установите height:0
на .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>