Html 内部Div溢出问题？

我有两个容器，它们都是

main content

div的子容器。每当第二个容器（或任何容器）溢出时，我可以滚动到上面，但两个div都溢出，只有内容溢出

例如，下图显示了第二个容器溢出，但当我滚动时，背景色不会完全展开。Iv'e尝试了绝对定位，但结果不是我所需要的

另外，我希望滚动时包含任何填充。例如，我是否将填充设置为

padding:0 10px

我希望能够比溢出内容滚动10px（考虑到我的div将扩展？）

下面是重复问题的一个例子

更新：

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

---

这是我想要的结果，但是有很多“黑客”比如将

font size

设置为

0

，设置

主要内容的背景色，设置每个div的背景色等等。我试图在没有所有这些解决方法的情况下获得相同的结果。
简单的方法是使用表布局

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

只需将
显示：表
添加到
主容器
类中即可

.main-container{
    display: table
}

试着这样做：

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

你可以试试这个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扩展到文本的宽度还是包装文本？@EricMartinez请看我更新的问题。我添加了所需结果的JSFIDLE和我用来获得它的所有
变通方法。我正试图得到一个更干净的解决方案。很好的回答，这是可行的，但我不能在容器和第二个容器中添加填充物。不管怎样，我能做到这一点吗？谢谢。另外，由于某种原因，我的整个页面都在滚动，不仅仅是内部div？而不是内部容器的
表行
，添加了
溢出：隐藏；右侧填充：30px。还为溢出添加了另一个包装