html - 显示屏上出现水平滚动条 : table element

Question

我有一个像这样的简单页面布局:

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.table-wrapper {
    display: table;
    width: 1366px;
    height: 100%;
}

.cell-left {
    display: table-cell;
    width: 240px;
}

.cell-right {
    display: table-cell;
    width: 1126px;
}

HTML:

<div class="table-wrapper">
    <div class="cell-left"></div>
    <div class="cell-right">

    /* Some really long content */

    </div>
</div>

当 .cell-right 中的内容变得足够长，浏览器可以显示垂直滚动条时，它还会添加水平滚动条，这真的会破坏我的布局。如果我将 100% 宽度放在 .table-wrapper 上，问题就会消失，但它也会缩小我不想要的两个单元格。我必须在所有 3 个元素上都有固定的宽度，以便对元素需要的响应式设计进行适当的调整。此外，两个单元格都需要跨越文档高度。

有趣的是，Internet Explorer 11 没有这个问题，但 Firefox 和 Chrome 都有。如何防止出现水平滚动条？

编辑

我忘了补充一点，我是在 1366x768 的屏幕分辨率上进行测试的。如果您想在自己的屏幕分辨率上自行测试，只需更改数字即可。

这是 fiddle :

http://fiddle.jshell.net/zddm6asz/1/show/

这是 1920x1200 的另一个:

http://fiddle.jshell.net/zddm6asz/2/show/

Answer 1

编辑:在尝试这个之前，先看看我在这个答案下的第一条评论。

如果你添加

overflow-x: hidden;

对于 .cell-left 和 .cell-right，这应该可以防止单元格获得水平滚动条。