为什么scrollWidth只包含左边距？

Question

所以,我有#Wrapper一个固定宽度的DIV .在那个DIV里面,我有另一个#Panel也有固定宽度的DIV :

<div id="Wrapper">
    <p>...</p>
    <div id="Panel">Panel</div>
    <p>...</p>
</div>  

有时,Panel的宽度大于Wrapper的宽度,在这种情况下,我想通过JavaScript扩展Wrapper,以便它完美地包裹Panel.

现场演示: http ://jsfiddle.net/H6rML/

我打算.scrollWidth在Wrapper 上使用来确定Panel的宽度.然而,问题是包装器具有水平填充,并且由于.scrollWidth某种原因仅包括包装器的左填充.所以:

Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width

所以,给定:

#Wrapper {
    width: 200px;
    padding: 10px;        
}

#Panel {
    width: 300px;
}

Wrapper.scrollWidth返回310px,这不是很有用.如果.scrollWidth没有包含任何填充并且仅返回Panel的宽度,我可以使用它(我会手动将填充添加到该值).如果两个填充都包含在内,我也可以使用它.但为什么只包括左边填充？(顺便说一句,这种行为似乎是跨浏览器.)

一些额外的说明:

1. 我无法直接在Wrapper上设置宽度.在我的实际代码中,我在一个祖先元素上设置宽度,该元素比Wrapper高几级,我使用自定义API来设置宽度.这就是我需要检索完整320px值的原因.

2. 我想要一个不依赖于Wrapper内容的解决方案.在我的演示中,它是一个Panel,但在其他情况下,可能会有一个不同的元素溢出,甚至是多个元素.这就是为什么我.scrollWidth选择Wrapper.

有没有办法获得值320px而无需手动添加正确的填充.scrollWidth值？

---

顺便说一句,根据标准,应该包括正确的填充:

scrollWidth属性必须返回运行这些步骤的结果:

1. 如果元素没有任何关联的CSS布局框,则返回零并终止这些步骤.

2. 如果元素是根元素而Document不在quirks模式下则返回max(文档内容宽度,innerWidth的值).

3. 如果元素是HTML body元素并且Document处于quirks模式,则返回max(文档内容宽度,innerWidth的值).

4. 返回'padding-left'属性的计算值,加上'padding-right'的计算值,加上元素的内容宽度.

资料来源:http://www.w3.org/TR/cssom-view/

为什么浏览器没有相应的行为？

---

为了进一步提高我的帖子的清晰度,让我总结两个主要问题:

(1)如果标准声明右边的填充应该包含在.scrollWidth值中,那么浏览器为什么不相应地表现呢？

(2)是否可以检索正确的值(320px在我的情况下),而无需手动添加正确的填充？

---

这个问题已在另一个帖子中得到解答

这个问题的答案位于:当子元素水平溢出时,为什么忽略父元素的右边距？

​

Answer 1

尝试这个：

#Wrapper {
    min-width: 200px;
    padding: 10px;
    float: left; 
}

或使用 jQuery

$(document).ready(function() {
    var width = jQuery("#Panel").width();
    $("#Wrapper").width(width);
});