Inner Div overflow issue?

Question

I have two containers which are both children of a main-content div. Whenever the second container (or any for that matter) overflow i can scroll over, BUT both the divs overflow, just the content.

For instance, the image below shows the second container overflowing, but the background colors do not expand the entire way as i scroll. Iv'e tried absolute positioning, but the results are not what i need.

Also, I would like any padding to be included when scrolling. For example, is i set my padding to be padding: 0 10px i want to be able to scroll 10px more than the overflowing content (considering my div will expand?)

Here is a JSFIDDLE of the replicated issue.

UPDATE:

I can fix the issue by setting each individual div's background color and also setting the main background color, but that seems a bit unclean and I would rather have a better way to get the desired results.

This JSFIDDLE is my desired result, but there are so many "hacks" like setting font-size to 0, setting the main-content's background color, setting each div's background color, etc. I am trying to get the same result without all these workarounds.

Answer 1

The easy way is to use table layout.

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

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

Answer 2

Just add the display: table to .main-container class.

.main-container{
    display: table
}

Answer 3

Try like this: 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

You can try this 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;
}