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

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.

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

Why does overflow happen when translating an element if the box model isn't affected?

css

css-transforms