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

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