Reply To: Proportionally scaling adjacent elements?

[Beverleyh]

Because you’ve removed the explicit height from #scaleable-wrapper.

translate(-50%, -50%) is part of a vertical and horizontal centring technique that works in conjunction with top: 50%; left: 50%; on .very-specific-design. You can see that in Chris’ original demo.

In your modified demo, with the height gone from #scaleable-wrapper, top: 50%; on .very-specific-design becomes redundant. It will effectively default to top: 0;. The problem there is that translate(-50%, -50%) is still doing its thing on the horizontal and vertical, pulling it back half way along its width and height. You want it to do that on the X axis but not the Y axis, so, changing it to translate(-50%, 0) will only make the centering happen horizontally.