Css 为什么翻译div会删除溢出？

我并不完全清楚CSS转换如何影响文档的流布局和元素的位置。根据MDN和W3C的文档，CSS转换不会干扰流布局：

来自（我的）：

通过修改坐标空间，CSS变换可以更改受影响内容的形状和位置，而不会中断正常的文档流

因此，如果我们翻译一个元素，原始的流布局应该保持不变，转换的结果应该是纯粹的视觉效果。 下面是一个简单的例子：

.container{
背景：白色；
保证金：0自动；
边框：1px纯灰；
}
.街区{
宽度：100%；
高度：100px；
}
蓝先生{
背景：蓝色；
}
瑞德先生{
背景：黄色；
}
.变换{
转化：translateY（-200%）；
}

---

这里有几点需要讨论

在CSS转换规范中，部分说明：

对于布局由CSS框模型控制的元素，transform属性不会影响转换元素周围的内容流。但是，溢出区域的范围考虑了转换的元素。此行为类似于通过相对定位偏移图元时发生的情况。因此，如果overflow属性的值为scroll或auto，则会根据需要显示滚动条，以查看在可见区域外转换的内容具体来说，变换可以扩展（但不收缩）溢出区域的大小，溢出区域是应用变换前后元素边界的并集。

这意味着转换应该会影响溢出和滚动。但是，在第一个示例中，溢出是到负坐标空间，因此不会生成任何新的滚动条

但是你的第二个例子，在直接阅读中，似乎与规范相矛盾，转换缩小了溢出区域。我认为这里发生的是位置相对位移，正如上面引用的那样，变换是非常相似的操作，变换正在消除相对定位的影响

---

换句话说，溢出面积被计算为应用相对定位和变换前后元素边界的并集。

感谢您的贡献，@alohci。你的解释听起来很合理，我可以想象这确实是正在发生的事情。我最近才开始质疑我的解决方案是否适合包含“广泛内容”，因为技术规范中不清楚我是否依赖于指定和定义的行为。为了实现在示例二中概述的期望结果，您是否依赖于翻译内容或您认为我应该考虑替代方法吗？