Flexbox 下的缩放转换在 Chrome 与 Firefox 中呈现不同

Question

我想将 div 居中，然后将其缩放（通过 transorm:scale）使其变大。

我使用 flexbox 使 div 居中。我想使用整个视图 space 所以我给 HTML 和 BODY 元素一个 100% 的高度。

在 Firefox 中它呈现得很好。然而，在Chrome中，内部div的缩放似乎导致BODY元素溢出，并出现垂直滚动条。

如果您在 Chrome 和 Firefox 中运行下面的代码片段，您会注意到不同之处：垂直滚动条仅出现在 Chrome 中。我想让它在 Chrome 中看起来像在 Firefox 中一样（没有滚动条）。

谁能帮我解决这个问题？

html {
  height: 100%;   
  background-color: black;     
}

body {
  height: 100%;
  display: flex;
  overflow: auto;
  margin: 0;
  background-color: antiquewhite;
}

div {
  height: 50px;
  width: 50px;
  margin: auto;
  transform: scale(1.7);
  background-color: blue;
}

<html>
  <body>
    <div>
    </div>
   </body>
 </html>

Answer 1

考虑使用 align-items/justify-content 来居中元素，而不是边距。 Chrome 似乎也缩放了导致此问题的边距：

html {
  height: 100%;
  background-color: black;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: antiquewhite;
}

div.box {
  height: 50px;
  width: 50px;
  transform: scale(1.7);
  background-color: blue;
}

<div class="box">
</div>

Flexbox 下的缩放转换在 Chrome 与 Firefox 中呈现不同

Scale transformation under flexbox renders differently in Chrome vs Firefox

css

firefox

google-chrome

flexbox

css-transforms