儿童变换规模导致异常溢出滚动外观？

Question

为什么垂直滚动条在此示例中的大小加倍，而不是水平滚动条？

<div style="width:200px; height: 200px; overflow:scroll">
  <div style="width: 400px; height: 400px; background-color:orange; transform: scale(.5, .5); -webkit-transform: scale(.5, .5); transform-origin: 0 0; -webkit-transform-origin: 0 0;">
    TEST TEXT 1 TEST TEXT 2 TEST TEXT 3 TEST TEXT 4 TEST TEXT 5 TEST TEXT 6 TEST TEXT 7 TEST TEXT 8
  </div>
</div>

水平滚动条应与垂直滚动条的比率相同。

正如在chrome，safari和firefox中发生的那样我猜这种行为是用某种标准写的吗？ 这是一个小提琴： http://jsfiddle.net/v2xhj3kw/

Answer 1

框模型正在向父元素添加属性

height: auto;

是导致身高增加的属性。