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

【问题标题】：How to add a horizontal scrollbar to an inner div that has a parent div with a vertical scrollbar?如何将水平滚动条添加到具有垂直滚动条的父 div 的内部 div？
【发布时间】：2016-02-13 21:03:27
【问题描述】：

我有一个固定高度的 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/

感谢任何解决问题的建议。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

Updated Fiddle

【讨论】：

这将只保留布局，直到使用（外部）垂直滚动条。