How do I get the padding to scale in a scaling transform?

Question

I am doing a scaling transform. The scaling origin is centered horizontally. When I scale the element, the vertical padding seems to be scaled, but the horizontal padding is not scaled. How do I get the horizontal padding to scale as well?

.inner {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-color: #f99;
  transform: scale(1.5);
  transform-origin: top center;
  box-sizing: border-box;
  padding: 20px;
}

.inner2 {
  background-color: #99f;
  height: 260px;
}

.outer {
  background-color: #ccc;
}

<div class="outer">
  <div class="inner">
    <div class="inner2">
    </div>
  </div>
</div>

Another question is with Chrome dev tools. The Chrome dev tools is not reflecting the changed computed properties after the scaling transform. (for example, the width is still unchanged in inspector).

Another question that I have is the inner element extends beyond the outer element. How do I get the outer element to contain the inner element after scaling transform?

UPDATE: I accidentally added a border to the inner element. After noticing the answer from @Stickers, I removed the border. Now, it is easy to observe that the horizontal padding is not scaled whereas the vertical padding seems to be scaled.

UPDATE: A codepen with a much larger padding showing that vertical padding is scaled whereas horizontal padding is not.

Answer 1

The .inner element has box-sizing: border-box; set, that tells the browser to account for any border and padding in the values you specify for width and height.

If we do the calculation 300-20x2-2x2=256 (height-paddingx2-borderx2), so that .inner2 should have height: 256px rather height: 260px; if you want to fit in perfectly. All padding values will be scaled correctly once you get that fixed.

For the size of the .outer elements, read the spec:

3. The Transform Rendering Model

Note: Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow...

I think that also answers the DevTools question.