Transform scale keeps the original space around the scaled element

Issue

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

Both are display: inline-block;.

What I need to happen is the outer div fits it's width to the width of the inner one. That's what I supposed to happen but not. What occur is that the outer div «thinks» the inner div has it's original size.

The outer div fits it's width to the inner's width only if the inner div is transform: scale(1) but not using an scale factor less than 1, for example: 0.5 (see example).

I need some way to achieve this by CSS in an elegant way.

.red {
  background-color: #f00;
}

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

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

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

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

Any idea on how to solve this?

Solution

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.

Answered By - G-Cyrillus