如何将水平滚动条添加到具有带垂直滚动条的父div的内部div？

Question

我有一个固定高度的div，包括两个彼此相邻的div：

<div id="idContainer">
    <div id="idPaneLeft">
    ...
    </div><div id="idPaneRight">
    ...
    </div>
</div>

内部div具有相同高度的内容，应使用常见的垂直滚动条同时滚动：

div#idContainer {
//...
    overflow-y: scroll;
}

这可以按预期工作。

示例：http://jsfiddle.net/8dy8x4y1/

右内部div的内容宽度大于div，应使用水平滚动条滚动：

div#idPaneRight {
    ...
    overflow-x: scroll;
}

但是，添加此设置会破坏网格布局，并且无法同时使用垂直滚动条滚动内部div的内容。

示例：http://jsfiddle.net/t1wy1vws/

对于解决问题的任何建议表示赞赏。

Answer 1

似乎默认vertical-align: middle正在应用。

您只需将vertical-align: top应用于两个子元素。

此外，display: inline-block在内联块元素之间引入了一些空白区域。要删除这些空格，我们需要将父容器的font-size称为0px，然后再将默认font-size应用于内联块子元素。

<强> Updated Fiddle