css 2列，动态内容。仅滚动右列而不超过窗口宽度

Question

我精通CSS，但却没有找到解决方案。

我的目标是IE9 +，对JavaScript / jQuery解决方案不感兴趣。 （至少在我用尽任何可行的CSS选项之前）

我为Web应用程序提供了复杂的2列布局。两列都有动态内容。左列需要展开以适应其内容而无需滚动条。右列可能具有需要访问的非常大的内容，因此右列需要能够独立滚动。 问题是我无法在右列上设置100％的宽度，因为它超过了窗口宽度。通常我会设置一个负的左边距来反击，但由于我不知道左列有多宽，我不能在这里做。 我想也许某种类型的hacky display: table-cell;可以工作，（或喘气，使用实际表格）但是唉，也没有这样成功。 JSFiddle示例。 http://jsfiddle.net/nARqR/ 似乎是一个常见的用例。

有什么建议吗？ 谢谢！

Answer 1

我能想到的唯一方法就是这样做（fiddle）：

.left {
    background-color: #ccc;
    float: left;
    vertical-align: top;
}
.right {
    background-color: #666;   
    color: #ccc;
}

但是你在右边的div上有填充问题，因为它的一部分隐藏在左边的div后面（因为它是浮动的）