CSS - Realign content (remove white space) after transform: scale

Question

So far I found only very complex or very "hacky" solution for the issue below:

What I have before transform

.element1 {
  height: 100px;
  width: 100px;
  background-color: red;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

What I get while I transform with scale:

.element1 {
  height: 100px;
  width: 100px;
  background-color: red;
  transform: scale(0.5);
  transform-origin: top left;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

What I want to get after transform: (this example does not contain transform, I just hardcoded widht/height, so its not solution)

.element1 {
  height: 50px;
  width: 50px;
  background-color: red;
  transform-origin: top left;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

I have more dynamic website where additional content can be added and I still want to have it nicely aligned. A lot of solution is counting "height" somehow, but that I believe can brake easily when more items are added inside page.

Is there minimalistic approach to this example where we can in some clear way keep things aligned to each other after transform?

Answer 1

As described by others there is no direct way how to do this properly in CSS.

It is recommended to use styles properly with annotation like @media only screen and (max-width: 750px) where you change the styles in a way its good experience on small devices.

However if you have limited time, the scale itself is working good enough for you for now - this is how I resolved it in React:

PLEASE NOTE: This is very hacky solution with hardcoded values and altough it works, it is not recommended on production environment and especially not for any critical components you want to use.

First I get reference to object that I am resizing with scale

import {useRef} from "react";
const dashboardTableRef = useRef(null);
...
<div ref={dashboardTableRef}>

Then I add function to count height dynamically in React and I add that style to the component that i need to resize in order to get-align again. (I scaling by 0.5, therefore I am diving height by 2)

    function countHeight() {
        if (dashboardTableRef.current?.offsetWidth > 700) {
            return "100%";
        }
        return "" + (dashboardTableRef?.current?.offsetHeight / 2) + "px";
    }
...
<div className="page-body" style={{height: countHeight()}}>

At the end on window resizing I am trigerring the re-rendering the React page by re-setting state (altough I had not changed anything there)

(as by default resizing window is not triggering react render, the browser is doing on its own)

useEffect(() => {
    window.addEventListener("resize", () => {
        setState({...state});
    });
    return () => {
        window.removeEventListener("resize", () => {})
    }
}, []);