flexbox 下的缩放转换在 Chrome 和 Firefox 中呈现不同答案

【问题标题】：Scale transformation under flexbox renders differently in Chrome vs Firefoxflexbox 下的缩放转换在 Chrome 和 Firefox 中呈现不同
【发布时间】：2019-07-25 00:01:06
【问题描述】：

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

我使用 flexbox 使 div 居中。我想使用整个视图空间，所以我给 HTML 和 BODY 元素设置了 100% 的高度。

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

如果您在 Chrome 和 Firefox 中运行下面的 sn-ps，您会注意到不同之处：垂直滚动条仅在 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>

【问题讨论】：

相关：stackoverflow.com/q/44550095/3597276

标签： css google-chrome firefox flexbox css-transforms

【解决方案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>

【讨论】：