title: How to manually set overflow size on parent container when using CSS transform on child?
body: <p>I understand that CSS transforms don't affect the effective size of an element, just its visual presentation. The following posts discuss this:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/48791093/css-scale-transform-on-child-not-affecting-parent-size">CSS Scale transform on child not affecting parent size</a></li>
  <li><a href="https://stackoverflow.com/questions/32835144/css-transform-scale-does-not-change-dom-size">CSS transform: scale does not change DOM size?</a></li>
  </ul>
  
  <p>I also see the following discussions that don't quite discuss overflow distance:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/14246982/how-can-i-wrap-a-container-around-its-css-transformed-contents?rq=1">How can I wrap a container around its css-transformed contents?</a></li>
  <li><a href="https://stackoverflow.com/questions/7565542/width-height-after-transform">width/height after transform</a></li>
  </ul>
  
  <p>I am trying to wrap an element which has been scaled inside another element with overflow set to scroll. </p>
  
  <p>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</p>
  
  <p>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 <code>child height * scale</code> and the width to <code>child width * scale</code> on the parent.</p>
  
  <p>I expect the actual scaling value to change via user input, dynamically resizing the element on the fly.</p>
  
  <p>Below is an example snippet of the issue in action.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;div class="child"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>