css - 如果盒子模型不受影响，为什么在翻译元素时会发生溢出？

Question

对我来说，将变换应用于元素始终意味着盒子模型没有移动，而元素只是在视觉上移动。

我想知道这是如何处理溢出的。如果元素的盒子模型没有被移动，那么浏览器如何知道元素正在脱离其父盒子？

.outer {
  width: 200px;
  height: 200px;
  background-color: blue;
  overflow: scroll;
}

.inner {
  width: 100px;
  height: 100px;
  transform: translateY(110%);
  background-color: red;
}

<div class='outer'>
  <div class='inner'>
  </div>
</div>

Answer 1

您是正确的，因为转换不会影响框布局，但是 the spec makes an exception for overflow :

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the ‘overflow’ property is ‘scroll’ or ‘auto’, scrollbars will appear as needed to see content that is transformed outside the visible area.