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

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.

Answer 2

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.

The CSS code

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

Answer 3

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>