所以，我有一个固定宽度的DIV #Wrapper。在该 DIV 中，我还有另一个 DIV #Panel，它也具有固定宽度：
<div id="Wrapper">
<p>...</p>
<div id="Panel">Panel</div>
<p>...</p>
</div>
的宽度大于包装器的宽度，在这种情况下，我想通过JavaScript加宽包装器，以便它完美地包装面板。
现场演示：http://jsfiddle.net/H6rML/
我打算使用包装器上的.scrollWidth来确定面板的宽度。但是，问题是包装器具有水平填充，并且由于某种原因，.scrollWidth仅包括包装器的左填充。所以：
Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width
所以，给定：
#Wrapper {
width: 200px;
padding: 10px;
}
#Panel {
width: 300px;
}
Wrapper.scrollWidth返回310px，这不是很有用。如果.scrollWidth不包含任何填充并且只返回面板的宽度，则可以使用它（我会手动将填充添加到该值）。如果两个填充都包括在内，我也可以使用它。但是为什么只包含左侧填充？（顺便说一句，此行为似乎是跨浏览器的。
一些附加说明：
我无法直接在包装器上设置宽度。在我的实际代码中，我在包装器上方几个级别的祖先元素上设置了宽度，并使用自定义 API 来设置宽度。这就是我需要检索完整
320px值的原因。我想要一个不依赖于包装器内容的解决方案。在我的演示中，它是一个面板，但在其他情况下，可能会有一个不同的元素溢出，甚至多个元素。这就是为什么我和
.scrollWidth一起在包装器上。
有没有办法获取值320px而无需手动向.scrollWidth值添加正确的填充？
顺便说一句，根据标准，应包括正确的填充：
scrollWidth 属性必须返回运行这些的结果 步骤：
如果元素没有任何关联的 CSS 布局框，则返回零并终止这些步骤。
如果元素是根元素并且文档未处于 quirks 模式，则返回 max（文档内容宽度，内部宽度的值）。
- 返回"左填充"属性的计算值，加上
如果元素是 HTML 正文元素并且文档处于 quirks 模式，则返回 max（文档内容宽度，innerWidth 的值）。
"右填充"的计算值，加上元素的内容宽度。
来源： http://www.w3.org/TR/cssom-view/
为什么浏览器没有相应的行为？
为了进一步提高我的帖子的清晰度，让我总结两个主要问题：
（1）如果标准规定正确的填充应该包含在.scrollWidth值中，那么为什么浏览器不相应地行为呢？
2）是否可以检索正确的值（在我的情况下320px），而无需手动添加正确的填充？
此问题已在另一个线程中得到解答
这个问题的答案就在这里：当子元素水平溢出时，为什么忽略父元素的右填充？
我不确定我是否正确理解，但从我读到的内容来看，我假设您想根据 #Panel 更改 #Wrapper 的宽度。在这种情况下，也许您可以尝试以下方法：
#Wrapper {
display: inline-block;
make sure to remove width from #Wrapper
}
今天，我不知道为什么领先的浏览器会共享此错误，但这是该问题的演示和inline-block解决方法。
document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth
+'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth
+'<br>three.scrollWidth = '+ document.querySelector('.three').scrollWidth
+' (fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +' (fix applied to direct child)';.parent{
border:1px solid rgba(50,150,220,1);
}
.child{
background:rgba(100,200,255,0.3);
padding:10px 20px;
white-space:nowrap;
}
.scroll-container{
border:1px solid red;
display:inline-block;
overflow:hidden;
}
.two, .three, .four{
width:60px;
}
.three .child{
display:inline-block;
}
.four .parent{
display:inline-block;
}<div class="scroll-container one">
<div class="parent">
<div class="child">Lorem ipsum dolor</div>
<div class="child">Lorem ipsum dolor sit amet</div>
</div>
</div>
<br>
<div class="scroll-container two">
<div class="parent">
<div class="child">Lorem ipsum dolor</div>
<div class="child">Lorem ipsum dolor sit amet</div>
</div>
</div>
<br>
<div class="scroll-container three">
<div class="parent">
<div class="child">Lorem ipsum dolor</div>
<div class="child">Lorem ipsum dolor sit amet</div>
</div>
</div>
<br>
<div class="scroll-container four">
<div class="parent">
<div class="child">Lorem ipsum dolor</div>
<div class="child">Lorem ipsum dolor sit amet</div>
</div>
</div>
<br>试试这个：
#Wrapper {
min-width: 200px;
padding: 10px;
float: left;
}
或使用 jQuery
$(document).ready(function() {
var width = jQuery("#Panel").width();
$("#Wrapper").width(width);
});
你可以使用 jQuery 来做到这一点：
$(function() {
$("#Wrapper").width($("#Panel").outerWidth());
});
这考虑了#Panel的填充、边距等。