内部 Div 溢出问题？

Question

我有两个容器，它们都是 main-content div 的子容器。每当第二个容器（或任何与此相关的容器）溢出时，我都可以滚动，但是 divs 都溢出，只有内容。

例如，下图显示第二个容器溢出，但背景颜色并没有在我滚动时扩展到整个方向。我试过绝对定位，结果不是我想要的。

此外，我希望在滚动时包含任何填充。例如，我是否将填充设置为 padding: 0 10px 我希望能够比溢出的内容多滚动 10px（考虑到我的 div 会展开？）

这是一个 JSFIDDLE 的复制问题。

更新：

我可以通过设置每个 individual div 的背景颜色并设置主要背景颜色来解决这个问题，但这似乎有点不干净，我宁愿有更好的获得所需结果的方法。

这个JSFIDDLE是我想要的结果，但是还有很多"hacks"比如设置font-size到0，设置main-content的背景颜色，设置每个 div 的背景颜色等。我试图在没有所有这些解决方法的情况下获得相同的结果。

Answer 1

最简单的方法是使用 table 布局。

.main-container {
   display: table;
}
.container, .second-container{
   display: table-row;
}

http://jsfiddle.net/afelixj/4mpue0gw/2/

Answer 2

只需将 display: table 添加到 .main-container class。

.main-container{
    display: table
}

Answer 3

这样试试：Demo

.main-container {
    overflow-x: auto;
    color: #AAA;
    background: #343434;
}
.container {
    white-space: nowrap;
}

.second-container {
    height: 300px;
    white-space: nowrap;
    background: #454545;
    display:table;
    width:100%;
}

Answer 4

你可以试试这个CSS:-

.main-container {
    overflow-x: auto;
    color: #AAA;
    display: table;
}
.container {
    white-space: pre-wrap;
    background: #343434;
    display: table-row;
}
.container > div {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}
.second-container {
    min-height: 300px;
    white-space: nowrap;
    background: #454545;
    display: table-row;
    padding: 10px;
}
.second-container > div {
    display: table-row;
    white-space: pre-wrap;
    line-height: 22px;
}

内部 Div 溢出问题？

Inner Div overflow issue?

html

css

overflow