How to prevent an object from stretching after rotation? - three.js

Question

How to prevent an object from being stretched after being rotated inside another object that has some scale?
In general, I want the child to behave as if the parent has a size of 1, 1, 1,
and I don't want to create a group for the parent and for the child.
A few letters for the system to accept the question
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Renderer
const renderer = new THREE.WebGLRenderer({
alpha: false,
antialias: true,
stencil: false,
depth: false
});
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera();
camera.position.z = 10;
new OrbitControls(camera, renderer.domElement)
// Parent
const parentGeometry = new THREE.BoxGeometry(1, 1, 1);
const parentMaterial = new THREE.MeshBasicMaterial({ color: "tomato" });
const parent = new THREE.Mesh(parentGeometry, parentMaterial);
parent.scale.set(3, 0.5, 3)
scene.add(parent);
// Child
const childGeometry = new THREE.BoxGeometry(1, 1, 1);
const childMaterial = new THREE.MeshBasicMaterial({ color: "lightblue" });
const child = new THREE.Mesh(childGeometry, childMaterial);
parent.add(child);
child.scale.x = 1 / parent.scale.x;
child.scale.y = 1 / parent.scale.y;
child.scale.z = 1 / parent.scale.z;
// ???
child.rotation.x = Math.PI / 4;
function resize() {
const width = document.documentElement.clientWidth;
const height = window.innerHeight;
camera.aspect = width / height;
camera.fov = 55
camera.updateProjectionMatrix();
renderer.setPixelRatio(Math.min(2, devicePixelRatio));
renderer.setSize(width, height);
}
window.addEventListener("resize", resize);
resize();
function tick(t) {
requestAnimationFrame(tick);
renderer.render(scene,camera);
}
requestAnimationFrame(tick);