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

For a practical view of my issue, here's a link to a codepen with my code:

CodePen

Snippets of my CSS code area as follows:

#container {
  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;
}

#object {
  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); /* This would be scale(1) on the small object */
}

This issue is holding back the development of my web app, so thanks in advance for your time and contributions.

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