html - 改变 child 的比例会导致异常的溢出滚动外观？

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 中，我猜这种行为是用某种标准编写的吗？ 这是一个 fiddle : http://jsfiddle.net/v2xhj3kw/

Answer 1

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

height: auto;

是导致高度增加的属性。