transform scale keeps the original space around the scaled element

Coming late to the party, but another way is to use a sizing element that is empty, not scaled, has the same external size as the scaled down element and sits underneath the scaled element. This drives the sizing of the parent, and the scaled element is then positioned absolutely on top of the sizing element.

.red { background-color: #f00; }
.green { background-color: #0f0; }
.blue { background-color: #00f; }

.container {
	position: relative;
	display: inline-block;
}

.sizingBox {
  width: 150px;
  height: 150px;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
	width: 300px;
	height: 300px;
	transform: scale(0.5);
	transform-origin: left top;
}

	<div class="container green">
      <div class="sizingBox blue"></div>
    	<div class="content red">Hello World</div>
	</div>

I think that one solution is to wrap the scaled-down element into an element with overflow: hidden. The wrapper should have the exact dimensions of the scaled-down content.

This solution was best for me.

.wrapper {
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  transform: scale(0.5);
  transform-origin: left top;
}

.box_1,
.box_2 {
  display: inline-block;
}

.red {
  background-color: #f00;
}

.green {
  background-color: #0f0;
}

<div class="box_2 green">
  <div class="box_1 red">Hello World</div>
</div>

A brutal way would be to virtually reduce space needed by element.

Your example shows a known width & height, so it makes it easy. else you would need a javascript method.

.box_1 {
    width:  300px;
    height: 300px;
    transform: scale(0.5);
    transform-origin: left top;
  margin-bottom:-150px;
  margin-right:-150px;
}

https://jsfiddle.net/0bc4sxk3/1/

Scaling up would mean positive margins.

Transform only happens at screen, elements still use initial room and place needed in the flow of the document.