How to prevent a rotated resize: auto div from moving when resizing it?

Question

This is a follow-up to my previous question.

Say we have the following code:

.rect {
  transform: rotateZ(45deg);
  width: 200px;
  height: 100px;
  resize: auto;
  overflow: hidden;
  background-color: #ddd;
}

<div class="rect"></div>

Notice how when you resize the element, the div seems to move as well. This is because it is rotated. If you remove the rotation amount, resizing works normally and you can make it wider and taller without the element seemingly moving.

I don't think transform-origin: top left is the solution, because my rectangle is indeed rotated around its center for the purposes of my application.

I'm unsure of whether a wrapper div will work. It seems like it has potential, but I'm unsure of how to handle the fact that there are now two separates widths and heights.