html – 缩放子级上的溢出滚动：X和Y轴上的不同行为

>有一个固定大小的容器,包含一个固定大小的儿童.
>有溢出滚动.
>然后,我通过转换缩小孩子,将其大小减半.

> X滚动消失,因为子宽度为200px(更具体地说,容器的scrollWidth属性相应缩小)
> Y滚动仍然存在,容器的scrollHeight属性仍然相同.

我可以在某种程度上理解每个轴的行为,但不是为什么它们的行为不同.

理想情况下,我希望Y轴像X轴一样.

如果我在子项上设置position：absolute,则Y轴充当X轴(两个滚动消失).

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  width: 400px;
  height: 400px;
  position:absolute;
  transform: scale(0.5);
}

/* Irrelevant styling */
.container {
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  BACkground-color: pink;
  transform-origin: top left;
}

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  width: 400px;
  height: 400px;
  display:inline-block;
  transform: scale(0.5);
}

/* Irrelevant styling */
.container {
  border: 2px solid palevioletred;
  position: relative;
}

.child {
  BACkground-color: pink;
  transform-origin: top left;
}