所以，我有一个 DIV#Wrapper它有固定的宽度。在该 DIV 中，我还有另一个 DIV#Panel它也有固定的宽度：

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

有时，Panel 的宽度比 Wrapper 的宽度大，在这种情况下，我想通过 JavaScript 加宽 Wrapper，以便它完美地包裹 Panel。

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

我打算使用.scrollWidth在包装器上确定面板的宽度。然而，问题是 Wrapper 有水平填充，并且.scrollWidth由于某种原因只包括包装器的左填充。所以：

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

所以，给定：

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

#Panel {
    width: 300px;
}

Wrapper.scrollWidth回报310px，这不是很有用。如果.scrollWidth不包含任何填充，只返回面板的宽度，我可以使用它（我会手动将填充添加到该值）。如果两个填充都包含在内，我也可以使用它。但为什么只包含左侧填充呢？ （顺便说一句，这种行为似乎是跨浏览器的。）

一些附加说明：

1. 我无法直接设置包装器上的宽度。在我的实际代码中，我在 Wrapper 上方几个级别的祖先元素上设置宽度，并使用自定义 API 来设置宽度。这就是为什么我需要检索完整的320px value.

2. 我想要一个不依赖于包装器内容的解决方案。在我的演示中，它是一个面板，但在其他情况下，可能会有不同的元素溢出，甚至是多个元素。这就是为什么我和.scrollWidth在包装纸上。

有没有办法获取值320px无需手动添加正确的填充.scrollWidth value?

顺便说一句，根据标准，应包含正确的填充：

scrollWidth 属性必须返回运行这些的结果 脚步：

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

2. 如果该元素是根元素并且文档不处于怪异模式，则返回 max(文档内容宽度，innerWidth 的值)。

3. 如果该元素是 HTML body 元素并且文档处于怪异模式，则返回 max(文档内容宽度，innerWidth 的值)。

4. 返回“padding-left”属性的计算值，加上“padding-right”的计算值，再加上元素的内容宽度。

Source: http://www.w3.org/TR/cssom-view/ http://www.w3.org/TR/cssom-view/

为什么浏览器不做出相应的行为？

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

(1) 如果标准规定正确的填充应包含在.scrollWidth值，那么为什么浏览器不做出相应的行为呢？

(2) 是否可以检索到正确的值（320px就我而言），而无需手动添加正确的填充？

这个问题已经在另一个帖子里回答了

这个问题的答案位于这里：当子元素水平溢出时，为什么父元素的右内边距会被忽略？ https://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par

​

我不确定我是否理解正确，但从我读到的内容来看，我假设您想根据 #Panel 更改 #Wrapper 的宽度。在这种情况下，也许你可以尝试以下方法：

#Wrapper {
    display: inline-block;
    make sure to remove width from #Wrapper
}