It has come to my understanding that CSS transforms do not impact the actual size of an element, rather its visual representation. There have been discussions on this topic:
- CSS Scale transform on child not affecting parent size
- CSS transform: scale does not change DOM size?
Furthermore, I have encountered discussions that touch on related issues but do not dive into overflow distance:
- How can I wrap a container around its css-transformed contents?
- width/height after transform
My current challenge involves wrapping a scaled element within another element that has overflow set to scroll.
The problem arises due to the fact that when an element is scaled using CSS, the overflow property retains the original dimensions of the element, which may not align with the scaled presentation.
Is there a way to explicitly define the overflow distance on the parent element to address this issue? This approach could involve setting the overflow height to be equivalent to the child height * scale and the width to be child width * scale on the parent.
Moreover, I anticipate the scaling value to change dynamically based on user input, consequently resizing the element in real-time.
Below is an illustrative snippet showcasing this issue:
.parent {
overflow: scroll;
height: 500px;
width: 500px;
background: black;
}
.child {
background-image: url("https://i.redd.it/7ifkx5z39b631.jpg");
transform: scale(0.25, 0.25);
transform-origin: top left;
height: 7000px;
width: 4900px;
}<div class="parent">
<div class="child">
</div>
</div>