[解決済み] CSS オーバーフローの hidden と visible が親要素の位置に与える奇妙な効果 [重複] について

let hidden = true;
const inner = document.getElementById('inner')

function toggleOverflow() {
  hidden = !hidden;
  inner.style.overflow = hidden ? 'hidden' : 
  'visible'
}

html, body {
  height: calc(100vh - 10em);
}

.page {
  font: 32px Arial, Helvetica, sans-serif;
  height: calc(100% - 1em);
}

.container {
  background-color: #ACF;
  height: 100%;
}

.outer-wrapper {
  background-color: rgba(187, 255, 204, 0.5);
  font-size: 2em;
  margin: 0 1em;
  position: relative;
}

.inner-wrapper {
  overflow: hidden;
  position: relative;
  width: fit-content;
}

.ng-content {
  margin: -18.75px 0;
  transform: scale(0.5);
}

.container-text {
  display: inline-block;
  position: absolute;
  bottom: 1em;
}

<div class="page">
  <button onclick="toggleOverflow()">Toggle Overflow</button><br>
  Content outside of the<br>
  panel being scaled and its<br>
  containing &lt;div&gt;, 32pt font<br>
  <div class="container">
    <!--Angular component start tag goes here -->
    <div class="outer-wrapper">
      <div id="inner" class="inner-wrapper">
        <div class="ng-content">
          50% scaled content goes here, 64pt font
        </div>
      </div>
    </div>
    <!-- Angular component end tag goes here -->
    <span class="container-text">This is an absolutely positioned &lt;span&gt; in the same &lt;div&gt;</span>
  </div>
</div>