transform scale keeps the original space around the scaled element

Question

I have two nested divs. The inner one is transform: scale(0.5).

Both are display: inline-block;.

What I need to happen is

Answer 1

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;
}

	

      

    	
Hello World