我在这里有一个 CodePen：
http://codepen.io/CWSpear/pen/BCriE
这个想法是应用程序有一个侧边栏，您可以单击“扩展”以使内容区域全宽。如果您仍想调出侧边栏，您可以单击“Flyout”以使侧边栏重新出现在内容上（即，您可能只能选择在纵向模式下弹出，很像 iPad 上的邮件应用程序）。
我做了一个类切换方法，因为它使 JavaScript 变得非常简单，并且一切都通过 CSS 转换完成。
问题是，即使内容区域的标题/工具栏没有宽度，因此应该始终是内容区域的全宽，但是当您单击展开时，其他一切都有效，除了宽度标题不变。
这只发生在 Webkit 中。似乎它计算了“100%”是什么，即使我更改了内容的填充（由于我的盒子大小，这使得内容更宽），标题保持相同的宽度。回来的路上似乎反其道而行之。当我再次单击展开（现在我想它通常可能会说折叠）时，它使标题成为全宽，但是当向内容添加填充时，它不会重新调整宽度，现在标题是内容太宽。
让我举例说明：
前：
点击展开，你会得到：
这是预期的：
它在 Firefox 中运行良好。还应该注意的是，如果您手动调整窗口大小，它会重新绘制区域并修复标题（这就是我实际获得“预期”屏幕截图的方式）。用 JavaScript 触发调整大小似乎不起作用（因为我认为这不会触发重绘）。
我已经尝试设置显式的“100%”宽度和其他 JavaScript 技巧和黑客尝试在标题上设置百分比宽度但没有运气。
有没有其他人遇到过这个或有修复？
它在 Safari 6.0.1 和 Chrome 22.0.1229.79 中被破坏，并在 Firefox 15.0.1 中工作。像冠军一样，Firefox。
[更新] 它似乎只与填充有关，因为 ahren 能够通过切换到边距来修复它。这很有效，因为内容的宽度是自动的。如果它是 100% 宽度，那么它会破坏它。
这里的演示：http: //codepen.io/CWSpear/pen/uvFJh
边距很好，直到我穿上width: 100%元素，然后它开箱即用，即使在box-sizing: border-box.
出于某种原因，我正在工作的实际项目在我设置时完全折叠了内容width: auto，即使它绝对是display: block. 我正在尝试重现它并为此发布 CodePen。
这确实是一个 Webkit 错误吗？还有其他选择吗？