内部Div溢出问题？

Question

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

例如，下面的图像显示第二个容器溢出，但是当我滚动时，背景颜色不会扩展整个方式。我试过绝对定位，但结果不是我需要的。

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

以下是复制问题的JSFIDDLE。

更新：

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

此JSFIDDLE是我想要的结果，但有很多“黑客”，例如设置font-size到0，设置main-content的背景颜色，设置每个div的背景颜色等。我试图在没有所有这些变通方法的情况下得到相同的结果。

Answer 1

简单的方法是使用表格布局。

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

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

Answer 2

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

.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;
}