内部 Div 溢出问题？答案

【问题标题】：Inner Div overflow issue?内部 Div 溢出问题？
【发布时间】：2015-06-11 13:22:12
【问题描述】：

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

例如，下图显示了第二个容器溢出，但是当我滚动时，背景颜色并没有完全扩展。我试过绝对定位，但结果不是我需要的。

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

这是复制问题的JSFIDDLE。

更新：

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

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

【问题讨论】：

您希望 div 扩展到文本的宽度还是换行？
@EricMartinez 请看我更新的问题。我添加了所需结果的 JSFIDDLE 以及我用来获取它的所有 workarounds。我正在尝试获得更清洁的解决方案。

标签： html css overflow

【解决方案1】：

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

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

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

【讨论】：

很好的答案这行得通，但我不能向容器和第二个容器添加填充。反正我能做到这一点吗？谢谢。
另外，由于某种原因，我的整个页面都在滚动，而不仅仅是内部 div？
而不是 table-row 用于内部容器，添加了 overflow: hidden; padding-right: 30px;。 http://jsfiddle.net/afelixj/4mpue0gw/4/
还为溢出添加了另一个包装

【解决方案2】：

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

.main-container{
    display: table
}

【讨论】：

【解决方案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%;
}

【讨论】：

【解决方案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;
}

【讨论】：