Clever Geek Handbook

Div internal overflow problem?

I have two containers that are children of a div main-content

. Whenever the second container (or whatever) overflows, I can scroll BUT both divs overflow, only the content.

For example, the image below shows that the second container is overflowing, but the background colors do not expand in all directions as you scroll. Iv'e tried absolute positioning, but the results are not what I need.

Also, I would like any shims to turn on when scrolling. For example, I have set my padding to be padding: 0 10px

, I want to be able to scroll 10px more than the overflowing content (given my div will expand?)

Here is the JSFIDDLE of the replicated problem.

enter image description here

UPDATE:

I can fix the problem by setting each separate div's background color as well as setting the foreground background color, but this seems a little unclean and I would prefer a better way to get the results I want.

This JSFIDDLE is my desired output, but there are so many "hacks" like setting font-size

to 0

, setting the background color main-content

, setting each div's background color, etc. I am trying to get the same result without all these workarounds.

+3


source to share


4 answers


The easy way is to use a table layout.

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


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

+4


source


Just add the class display: table

to .main-container

.



.main-container{
    display: table
}
0


source


Try it 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%;
}
0


source


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


source






More articles:


All Articles