容器转换为适合，绝对定位，仍然导致溢出，就好像没有转换一样

Question

编辑： 我忘了说我也将它定位为绝对。绝对对此感到抱歉。内容中的编辑以粗体 .

显示

我有一个用于缩放其内容的容器。我需要均匀地缩小范围，并意识到我可以使用 transform CSS 属性以方便使用。

结果很好，内容缩放和放置得很好。问题是，我在 body 元素上溢出，这是由容器元素引起的。它没有跨越 window 边界，当它被转换 并且定位为绝对 时也没有。但是，出于某种原因，我的浏览器（Edge 16）决定容纳 space 元素，就好像它没有被转换一样。

.container {
  position: absolute;
  width: 10000px; height: 10000px;
  border: solid 100px red;
  transform-origin: top left;
  transform: scale(0.01);
}

.orange-box {
  width: 5000px; height: 2000px;
  background-color: orange;
}

<div class='container'>
  <div class='orange-box'>
</div>

我在 Chrome 64 上试过几次，我在 body 上没有溢出。不过，我确实想利用它，并且我希望获得 Edge 支持。

有没有办法解决这个问题bug/issue？是否有一种方法可以防止特定元素导致溢出，而不是完全隐藏它们？我也不想在 body 上 overflow: none，因为 body 可能会溢出。

Answer 1

我不认为这是 Edge 中的错误。至少，我在 Chrome.

中看到了滚动条

也许你可以绕过它，将 div 放在最左边和最上面（不会拉伸 body 边界）

.container {
    width: 10000px;
    height: 10000px;
    border: solid 100px red;
    transform: scale(0.01);
    top: -10095px;
    position: absolute;
    left: -10095px;
    transform-origin: right bottom;
}

.orange-box {
  width: 5000px; height: 2000px;
  background-color: orange;
}

<div class='container'>
  <div class='orange-box'>
</div>

Answer 2

我把它全部封装在另一个容器里，定位成relative，用translate(0)改造。转换什么都不做，但它不同于 none，这就是我需要将 child 定位为 fixed 以尊重其容器位置的全部内容：参见 MDN/position/fixed

然后，我将我们以前的容器的定位更改为 fixed，它做了 absolute 在 Edge 16 上做不到的事情，并将容器从文档流中删除。

.container-container {
  position: relative;
  top: 50px;
  transform: translate(0);
}

.container {
  position: fixed;
  width: 10000px; height: 10000px;
  border: solid 100px red;
  transform-origin: top left;
  transform: scale(0.01);
}

.orange-box {
  width: 5000px; height: 2000px;
  background-color: orange;
}

<div class='container-container'>
  <div class='container'>
    <div class='orange-box'>
  </div>
</div>

我将 container-container 放置在远离左上角的位置，以显示固定的 child 会随之移动，这要归功于 translate(0) 变换。

然而，我并没有使用这个。我改为通过 CSS 将 container-container 的 overflow 样式设置为 hidden，并像以前一样保留所有内容。仅当 container-container 的宽度和高度设置为包含在正文中时才有效，这在我的应用程序中已经是这种情况。

容器转换为适合，绝对定位，仍然导致溢出，就好像没有转换一样

Container transformed to fit, positioned absolute, still causing overflow as if not transformed

html

css

css-transforms

microsoft-edge