How to manually set overflow size on parent container when using CSS transform on child?

Question

I understand that CSS transforms don't affect the effective size of an element, just its visual presentation. The following posts discuss this:

• CSS Scale transform on child not affecting parent size
• CSS transform: scale does not change DOM size?

I also see the following discussions that don't quite discuss overflow distance:

• How can I wrap a container around its css-transformed contents?
• width/height after transform

I am trying to wrap an element which has been scaled inside another element with overflow set to scroll.

The issue is that because CSS scaling does not affect the actual size of an element, just its visual presentation the scroll overflow is set to the original dimensions of the element, which is either too large or too small

Is there a method of explicitly setting the overflow distance on the parent to work around this issue? That might allow me to do something like setting the overflow height to the child height * scale and the width to child width * scale on the parent.

I expect the actual scaling value to change via user input, dynamically resizing the element on the fly.

Below is an example snippet of the issue in action.

.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>

Answer 1

Well you could use a pseudo element inside the container...

.parent:before {
     content: '';
     position: relative;
     z-index: -1;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25);
}

That should force the overflow. I'm using a negative z-index to make sure it doesn't interact with the content.

Note: if the scaling is dynamic it's likely easier to actually create an empty element (pseudo-classes are difficult to control via JS) and then dynamically control the height/width using Javascript.

<div class="parent">
  <div class="spacer"></div>
  <div class="child">
  </div>
</div>

And CSS

.spacer {
     content: '';
     position: relative;
     z-index: -1;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25);
}

---

Edit: Oops just realized you need to go smaller than the original. The above would work if the new overflow is larger than the starting state...

In this specific case, you might want to avoid the transform all together and instead scale the background image. Then scale the element using your JS function. In this case, the background will scale to fit its container.

.child {
     background-image: url("https://i.redd.it/7ifkx5z39b631.jpg");
     background-size: contain;
     width: calc(4900px * 0.25);
     height: calc(7000px * 0.25)
}