CSS Transform scale scrolling issue

Question

I am creating a web app that uses CSS' transform scale property. As shown by the image below, I have an object inside of a container, which fits nice and snugly inside, without any overflowing content. This is how I wish for it to be.

My issue is brought up when I re-scale the object to a size greater than the container. As shown by the image, clearly the object is larger than the container. As marked by the arrows and labels of "scrollable area", the container can scroll to these areas, but the parts labelled with "hidden" are not visible or accessible through the scroll due to their overflow.

#container1 {
  position: fixed;
  width: 300px;
  height: 200px;
  border: 1px solid #000000;
  left: 0px;
  top: 0px;
  margin-left: 10px;
  margin-top: 10px;
  overflow: auto;
  display: block;
  text-align: center;
}

#object1 {
  position: relative;
  width: 120px;
  height: 120px;
  display: inline-block;
  background-color: rgba(255, 0, 255, 0.45);
  margin-top: 40px;
  border-radius: 25px;
}

#container2 {
  position: fixed;
  width: 300px;
  height: 200px;
  border: 1px solid #000000;
  left: 0px;
  top: 0px;
  margin-left: 330px;
  margin-top: 10px;
  overflow: scroll;
  display: block;
  text-align: center;
}

#object2 {
  position: relative;
  width: 120px;
  height: 120px;
  display: inline-block;
  background-color: rgba(255, 0, 255, 0.45);
  margin-top: 40px;
  border-radius: 25px;
  transform: scale(3);
}

<div id="container1">
  <div id="object1"></div>
</div>

<div id="container2">
  <div id="object2"></div>
</div>

Here's a link to a CodePen with my code:

CodePen

Answer 1

My best guess would be that this is happening because of transform origin. Try setting it to 0 0 should fix Your issue:

#object2 {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
  background-color: rgba(255, 0, 255, 0.45);
  border-radius: 25px;
  transform: scale(3);
  transform-origin: 0 0;
}

Demo codepen