css - 色带标题，但不扩展滚动区域

我正在实现一个简单的带状标题，该标题延伸出内容区域（左右），显示带有图像背景的3d效果（没有css3技巧）。

我尝试了浮动，负边距并最终确定了相对位置，但是我的问题是，我尝试过的所有解决方案都增加了内容的可滚动宽度（将其向右扩展）。我想将功能区保留为“背景效果”，以保持内容的可滚动宽度。

看看我的简化工作示例：http://jsfiddle.net/c5cVG/16/

body {
    background: blue;
}

body>div {
    width: 200px;
    margin: 0 auto;
    background: white;
}

body>div>p {
    padding: 5px;
}

body>div>h2 {
    overflow: hidden;
    padding: 10px 20px 5px;
    background: red;
    width: 190px;
    left: -15px;
    position: relative;
}

如果将视口宽度设置为215像素以下，则可以看到红色“色带”的左边缘扩展部分位于视口外部，并且无法使用水平滚动条在其中滚动。

我想在右边缘扩展上获得相同的效果（溢出白色区域），但它会推动可滚动区域的右边缘并使自身可滚动。

任何帮助或演示，将不胜感激。

最佳答案

好的，我在此线程中找到了一个适合我的解决方案：https://stackoverflow.com/a/2650215/2084434（由Nikolaos Dimopoulos回答）

将整个内容包装到另一个div中并应用

#wrapper {
    width: 100%;
    overflow: hidden;
    min-width: 200px;
}

工作正常。
这是更新的小提琴：http://jsfiddle.net/jJaxp/2/